為什么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);
}); 

這是執行此操作的一般想法，您可能仍需要對方法調用進行一些調整以使其適合。