單擊按鈕不單擊到錶行

Question

我有一個表，我已經實現了手風琴效果。其中一個單元格有一個<button>。如果我點擊按鈕，按鈕的onclick會發生，但表格行也會進行點擊（展開/摺疊手風琴）。如何防止點擊按鈕進入表格行？

這是我的點擊功能：

$("#accordiontable tr.accordion-parent").click(function() { 
    $(this).nextUntil(".accordion-parent").toggle(); 
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e"); 
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s"); 
}); 

，一個在細胞中有一個<button onclick="DoCommand()">。

Answer 1

我無法讓e.stopPropagation正常工作，當我單擊按鈕時，它仍然展開/摺疊了該行。我認爲必須有一種方法才能確切地看到所點擊的內容。我發現https://api.jquery.com/event.target/並使用它是這樣的：

$("#accordiontable tr.accordion-parent").click(function (e) { 
    var target = $(e.target); 
    if (!target.is("button")) { 
     $(this).nextUntil(".accordion-parent").toggle(); 
     $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e"); 
     $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s"); 
    } 
}); 

Answer 2

調用jQuery的event.stopPropagation（）函數。

https://api.jquery.com/event.stoppropagation/

$("#accordiontable tr.accordion-parent").click(function (e) { 
    e.stopPropagation(); 
    $(this).nextUntil(".accordion-parent").toggle(); 
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e"); 
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s"); 
}); 

Answer 3

添加e.stopPropagation（）;到第一個點擊處理程序。

$("#accordiontable tr.accordion-parent").click(function (e) { 
    e.stopPropagation(); 
    $(this).nextUntil(".accordion-parent").toggle(); 
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-e"); 
    $(this).find(".accordion-arrow").toggleClass("ui-icon-circle-triangle-s"); 
});