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

Posted 2023-05-07

【中文标题】knockoutjs：防止没有处理程序的元素的事件冒泡

【英文标题】：knockoutjs: prevent event bubbling for elements with no handler

【发布时间】：2012-12-06 05:00:31

【问题描述】：

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

这是一个例子fiddle。

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

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

【参考方案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 了你的答案，并且只在一天左右的时间里给出这个问题，公平地说，为了其他解决方案。我不会忘记选择最优雅/最有用、最诚实的引擎。