javascript - 为什么 event.stopPropagation 也停止了我的 Bootstrap Collapse？

Question

我有一个具有 onclick 属性的列表项 (#planAdminMenuItem)。此列表项内部有一个图标 (.spinner)，该图标将折叠 #collapseExample。每当单击 .spinner 时，我希望它仅运行 Bootstrap 折叠。我不希望它运行 drawPlanAdmin 函数。我尝试将 event.stopPropagation 添加到我的 toggleSpinnerLeftMenu 函数中，但每当我这样做时，它也会停止 Bootstrap 崩溃。父级点击被阻止，但 Bootstrap 崩溃也是如此。

PHP 和 HTML 代码

<ul>            
    <li id="planAdminMenuItem" onclick="plan.drawPlanAdmin();"> 
        Book Plan
        <span class="icn icn-chevron-down spinner" onclick="ui.toggleSpinnerLeftMenu(this,event);" data-toggle="collapse" data-target="#collapseExample" data-aria-expanded="true" aria-controls="collapseExample"></span>
    </li>
    <!-- the collapsable area -->               
    <li id="collapseExample" class="collapse in">
        <ul>
            <li onclick="plan.drawRunListAdmin();">
                Run List View
            </li>
            <li onclick="plan.drawLadderAdmin();"> 
                Ladder View
            </li>               
        </ul>
    </li>
</ul>

JS 代码

toggleSpinnerLeftMenu:function(el,event){
    el = jQuery(el);

    if(el.hasClass('icn-chevron-up')){
        el.addClass('icn-chevron-down');
        el.removeClass('icn-chevron-up');
    }else if(el.hasClass('icn-chevron-down')){
        el.addClass('icn-chevron-up');
        el.removeClass('icn-chevron-down');

    }
    event.stopPropagation(); //why is this stopping the collapse also?
},

Answer 1

stopPropagation 正在做它应该做的事情。

如果您希望通过单击内部元素来传播父元素，则根本不执行 event.stopPropagation 。

尽管由于某些原因，如果您需要这样做，那么我的建议是:调用该函数，例如

toggleSpinnerLeftMenu:function(el,event){
    el = jQuery(el);

    if(el.hasClass('icn-chevron-up')){
        el.addClass('icn-chevron-down');
        el.removeClass('icn-chevron-up');
    }else if(el.hasClass('icn-chevron-down')){
        el.addClass('icn-chevron-up');
        el.removeClass('icn-chevron-down');

    }
    plan.drawPlanAdmin(); // Call the function inside of the child element's click handler.
    event.stopPropagation(); //why is this stopping the collapse also?
},

更新:由于您在评论中更清楚地描述了该问题，该评论的解决方案完全超出了我上面所写的内容，因此我正在更新可能有帮助的新内容。

不要附加两个事件处理程序(一个使用内联 onClick 属性，另一个使用 Bootstrap 的 data-collapse)，而是使用一个:

$(".spinner").on("click", function(event) { // tip: Give a better id or class name 
    $('#collapseExample').collapse({toggle: true});
    ui.toggleSpinnerLeftMenu(this, event);
}); 

这是这样做的总体思路，您可能仍然需要对方法调用进行一些调整以适应它。