bootstrap复选框按钮事件传播问题

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

你可以试试这个 $(".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(); }); 希望这适合你:)

Answer 2

我意识到我可能以错误的方式看待这个问题。我仍然不能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>