Knockoutjs - 表格行点击绑定，想要从点击事件中排除列

发布于 2024-12-27 11:14:12 字数 353 浏览 0 评论 0原文

我正在尝试使用淘汰赛将点击绑定到表中的一行，如下所示：

<tr data-bind="click: $root.selectItem">

效果很好。问题是当我尝试排除某些列执行单击操作时。我的行中有编辑和删除按钮，我不希望它们触发 selectItem 单击事件。我是否只需将我想要以这种方式表现的所有 td 绑定到单击事件，还是有更简单的方法来做到这一点？

在这里小提琴： http://jsfiddle.net/blankasaurus/WYKEM/

原文

I am trying to use knockout to bind a click to a row in a table like this:

<tr data-bind="click: $root.selectItem">

It works great. The problem is when I try to exclude certain columns from taking the click action. I am have edit and delete buttons in my row and I don't want them firing the selectItem click event. Am I going to just have to bind all the td's I want to behave this way to the click event or is there an easier way to do it?

Fiddle here: http://jsfiddle.net/blankasaurus/WYKEM/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三寸金莲 2025-01-03 11:14:12

更新：您可以通过添加 clickBubble: false 作为与 click 绑定的附加绑定来避免自定义绑定，如 Kevin Obee 建议并在本示例中演示：http://jsfiddle.net/kevinobee/Q25ja/2/

原文：您可以使用自定义绑定来包装click 绑定并防止发生其他事件。它可能看起来像：

ko.bindingHandlers.clickAndStop = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var handler = ko.utils.unwrapObservable(valueAccessor()),
            newValueAccessor = function() {
                return function(data, event) {
                    handler.call(viewModel, data, event);
                    event.cancelBubble = true;
                    if (event.stopPropagation) event.stopPropagation();
                };
            };

        ko.bindingHandlers.click.init(element, newValueAccessor, allBindingsAccessor, viewModel, context);    
    }
};

这是一个示例： http://jsfiddle.net/rniemeyer/xj7Hs/

Update: you avoid a custom binding by adding clickBubble: false as an additional binding with the click binding as suggested by Kevin Obee and demonstrated in this sample: http://jsfiddle.net/kevinobee/Q25ja/2/

Original: You can use a custom binding that wraps the click binding and prevents additional events from happening. It might look like:

ko.bindingHandlers.clickAndStop = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var handler = ko.utils.unwrapObservable(valueAccessor()),
            newValueAccessor = function() {
                return function(data, event) {
                    handler.call(viewModel, data, event);
                    event.cancelBubble = true;
                    if (event.stopPropagation) event.stopPropagation();
                };
            };

        ko.bindingHandlers.click.init(element, newValueAccessor, allBindingsAccessor, viewModel, context);    
    }
};

Here is a sample: http://jsfiddle.net/rniemeyer/xj7Hs/

回复收藏 0 原文

~没有更多了~