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

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

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

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

Why is event.stopPropagation also stopping my Bootstrap Collapse?

javascript

jquery

collapse

stoppropagation

twitter-bootstrap