引导复选框按钮事件传播问题

Question

我有一个自定义面板栏，面板标题部分带有一个 div。单击此面板应展开/折叠面板内容，使用 jQuery 切换可以正常工作。

在面板标题中，我放置了一个引导复选框，目的是选中该框会激活该面板，但不会影响面板内容是否展开或折叠。

问题：

单击复选框会选中和取消选中引导复选框，但还会展开/折叠面板内容。

我一直在尝试的事情：

我一直在尝试停止复选框上的传播，认为无论引导程序在哪里附加事件，我都可以阻止点击事件在面板标题上发生。

//try get rid of event bubbling for checkboxes
$(".btn-group.checkbox").on("change", function (e)
{
    /*I've tried each of these variations*/
    //e.stopPropagation();
    //e.preventDefault();
    //return false;
});

我也尝试过点击事件而不是更改，我已经在 btn-group 中的 .btn 元素上尝试过这个：

//try get rid of event bubbling for checkboxes
$(".btn-group.checkbox .btn").on("change", function (e)
{
    /*I've tried each of these variations*/
    //e.stopPropagation();
    //e.preventDefault();
    //return false;
});

这些选项都不起作用，因为复选框仍会导致面板内容显示和隐藏。

Answer 1

我意识到我可能看错了。我仍然不能 100% 确定为什么我无法使用 stopPropagation，我怀疑这与 Bootstrap 已经绑定了自己的事件处理程序有关，但我并不完全相信。

我的替代方法是连接面板栏头部部分的点击事件，然后检查原始事件的目标以查看它来自何处。如果它是自定义复选框，我会忽略它，允许引导复选框做它的事情。如果没有，我切换了面板内容。

代码如下：

//handle the panel bar header click event
$(".pnl-01-bar").click(function (e)
{
    //get a jquery reference to the original target of this event
    var $target = $(e.originalEvent.target);

    //if this did NOT come from the checkbox
    if (!$target.hasClass("bs-checkbox"))
    {
        //toggle the panel content
        $("#pnlSlider1").toggle();
    }            
});

这是 HTML：

<div class="scenario-heading pnl-01-bar">
    <div class="col-md-3">
        <div data-toggle="buttons" class="btn-group checkbox">
        <label class="btn btn-primary  checkbox" for="UseRetirementAge">
        <span class="bs-checkbox"></span>
        <input type="checkbox" style="visibility: hidden" data-val="1" id="UseRetirementAge" name="UseRetirementAge" value="1">
        </label>
        </div>
        <span data-valmsg-replace="true" data-valmsg-for="UseRetirementAge" class="field-validation-valid"></span>
            Change my retirement date
        </div>
</div>
<div class="scenario-panel">
    <div style="display:none" id="pnlSliders1">
        ...panel content goes here
    </div>
</div>

Answer 2

你可以试试这个

$(".btn-group.checkbox .btn").on("change", function (e) {
    if (!e) var e = window.event
    e.cancelBubble = true;
    //try this
    if (e.stopPropagation) e.stopPropagation();    
    //if above code is not working then try
    //if (e.stopImmediatePropagation) e.stopImmediatePropagation();
});