knockoutjs：防止没有处理程序的元素的事件冒泡答案

【问题标题】：knockoutjs: prevent event bubbling for elements with no handlerknockoutjs：防止没有处理程序的元素的事件冒泡
【发布时间】：2012-12-06 05:00:31
【问题描述】：

似乎绑定<event>Bubble: false 仅在<event> 存在a defined event handler（参见注释4）时才有效。

这是一个例子fiddle。

对于具有某些事件的本机处理程序的元素（例如单击：<textarea>、<a>、<select> 等），如果本机处理程序就足够了，我希望设置绑定，例如，clickBubble: false on它们无需绑定“虚假”处理程序即可工作。

我想我的问题是，是否有另一种淘汰方法可以在没有额外绑定的情况下实现这一目标？

【问题讨论】：

标签： events event-handling knockout.js event-bubbling

【解决方案1】：

Bubble 处理程序不是实际的绑定处理程序，而是用作event 绑定中的选项（click 绑定调用event 绑定）。因此，它们不会自行运行。

因此，您可以添加一个“虚假”无操作处理程序并使用clickBubble，或者您当然可以选择创建一个自定义绑定来为您执行此操作。

可能是这样的：

ko.bindingHandlers.preventBubble = {
    init: function(element, valueAccessor) {
        var eventName = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.registerEventHandler(element, eventName, function(event) {
           event.cancelBubble = true;
           if (event.stopPropagation) {
                event.stopPropagation();
           }                
        });
    }        
};

然后放：

<input data-bind="preventBubble: 'click'" />

如有必要，您还可以进一步增强它以接受一系列事件。

示例：http://jsfiddle.net/rniemeyer/WcXwZ/

【讨论】：

谢谢，RP。我认为 utils 库的自定义绑定和使用，根据您的小提琴，对于多 ViewModel 应用程序和可重用比在每个 VM 类上填充虚假处理程序更具吸引力。我已经 +1 了你的答案，并且只在一天左右的时间里给出这个问题，公平地说，为了其他解决方案。我不会忘记选择最优雅/最有用、最诚实的引擎。