在淘汰表中使用选中的绑定时防止事件冒泡 [英] Prevent event bubbling when using the checked binding in knockoutjs

问题描述

我正在使用KnockoutJs和Twitter Bootstrap构建UI.

I'm building a UI using KnockoutJs and Twitter Bootstrap.

我在称为dropdown-toggle的Bootstrap对话中使用了checked绑定.

I'm using the checked binding inside a Bootstrap dialogue called dropdown-toggle.

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Facets
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <!-- ko foreach: facets -->
        <li>
            <input type="checkbox" data-bind="checked: Visible" /> 
            <span data-bind="text: Name"></span>
        </li>
        <!-- /ko -->
    </ul>
</div>

一切都很好，但是我希望在选中复选框时下拉对话框保持打开状态.

Everything is fine except that I would like the drop down dialogue to remain opened when checking the checkboxes.

这是一个带有示例的小提琴: http://jsfiddle.net/MikeEast/L3KfG/2 /

Here is a fiddle with an example: http://jsfiddle.net/MikeEast/L3KfG/2/

我尝试创建自己的绑定处理程序，该处理程序显式地将检查后的绑定与event.preventDefault()和event.stopPropagation()一起使用，从而使对话框保持打开状态，但阻止选中该复选框.

I have tried creating my own binding handler which uses the checked binding explicitly together with event.preventDefault() and event.stopPropagation() which leaves the dialogue opened, but prevents the checkbox to be checked.

有指针吗?

推荐答案

听起来您走在正确的轨道上.您基本上想做的等同于:

It sounds like you were on the right track. You basically want to do the equivalent of:

click: function() { return true; }, clickBubble: false

OR 可以在自定义绑定中完成，例如:

OR This could be done in a custom binding like:

ko.bindingHandlers.stopBubble = {
  init: function(element) {
    ko.utils.registerEventHandler(element, "click", function(event) {
         event.cancelBubble = true;
         if (event.stopPropagation) {
            event.stopPropagation(); 
         }
    });
  }
};

除非您返回true，否则KO附加的常规单击/事件处理程序将阻止默认操作.但是，如果我们连接自己的事件处理程序，则只需要防止其冒泡即可.

The normal click/event handler attached by KO will prevent the default action unless you return true. However, if we hook up our own event handler, then we only need to prevent it from bubbling.

示例: http://jsfiddle.net/MikeEast/PyNfg/1/

这篇关于在淘汰表中使用选中的绑定时防止事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！