KnockoutJS： Click-Bound Anchor-Tag 内的复选框不可选择

Question

我正在尝试将 checked 绑定到位于锚标记内的复选框输入上，锚标记本身是 click 绑定的。

虽然我知道这可能不完全有效（交互式内容可能不是 anchor-tags 的后代），但我仍然希望它按预期工作 - 即使只是为了理解它。

目前，只有外部 click 事件得到处理，点击从未到达我的复选框。

这里是我想要实现的示例：http://jsfiddle.net/fzmppu93/2/

查看了 KnockoutJS 文档后，我尝试 clickBubble: true 对 anchor-tag 的 click 绑定 - 但无济于事。

如果您感兴趣，用例是一个包含链接的无序列表 - 每个 "links" 都包含有关电视节目的信息：标题、演员、图像、概要。该节目是可选的，但也有 'quick-actions' 将其标记为已看过、加注星标等。

是否有另一种方法可以使复选框在 anchor-tag 中起作用？

Answer 1

我编写了一个类似于 "clickBubble" 的自定义绑定处理程序，但是我的允许您阻止任何事件的传播。

这是绑定处理程序：

ko.bindingHandlers.preventBubble = {
        init: function (element, valueAccessor) {
            var eventName = ko.utils.unwrapObservable(valueAccessor());
            var arr = eventName;
            if (!eventName.pop) {
                arr = [arr];
            }
            for (var p in arr) {
                ko.utils.registerEventHandler(element, arr[p], function (event) {
                    event.cancelBubble = true;
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    }
                });
            }
        }
    };

这是您示例的有效 fiddle。