为什么event.stopPropagation也可以阻止我的Bootstrap崩溃？

Question

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

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

这是执行此操作的一般想法，您可能仍需要对方法调用进行一些调整以使其适合。