knockoutjs：防止没有处理程序的元素的事件冒泡 [英] knockoutjs: prevent event bubbling for elements with no handler

问题描述

似乎绑定< event> Bubble：false 仅在定义的事件处理程序（请参阅注释4 ）for < event> p>

以下是小提琴的示例。

对于具有某些事件的本地处理程序的元素（例如，单击：< textarea> ，< a& ; ，< select> 等），其中本机处理程序就足够了，我期望设置绑定，例如 clickBubble：false ，而不必绑定一个伪造处理程序就可以工作。

我想我的问题是，是还有另外一种淘汰的方式来实现这个没有额外的绑定？

解决方案

Bubble 处理程序不是实际的绑定处理程序，并且用作事件中的选项 bi nding（点击绑定调用事件绑定）。所以，他们不会自己运行。

所以，你可以添加一个伪造的无操作的处理程序，并使用 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/

It seems like the binding <event>Bubble: false only works when there's a defined event handler (see Note 4) for <event>.

Here's an example fiddle.

For elements having native handlers for certain events (e.g. click: <textarea>, <a>, <select>, etc.), where the native handler suffices, I would expect setting the binding, e.g., clickBubble: false on them, without having to bind a "bogus" handler, to work.

I guess my question is, is there another knockout way to achieve this without extra bindings?

解决方案

The Bubble handlers are not actual binding handlers and are used as options in the event binding (click binding calls event binding). So, they do not run on their own.

So, you can add a "bogus" no-op handler and use clickBubble or you could certainly choose to create a custom binding to do this for you.

Maybe something like:

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();
           }                
        });
    }        
};

And then just put:

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

You could also enhance it further to accept an array of events, if necessary.

Sample: http://jsfiddle.net/rniemeyer/WcXwZ/

这篇关于knockoutjs：防止没有处理程序的元素的事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！