单击按钮不单击到表行

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