javascript - 单击按钮不单击到表行

Question

我有一张 table ，我用它实现了 Accordion 效果。其中一个单元格有一个 <button> .如果我单击该按钮，则会发生该按钮的 onclick，但表格行也会进行单击(这会展开/折叠 Accordion )。如何防止点击通过按钮到达表格行？

这是我的点击功能:

$("#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

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