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

调用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 2

我无法使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 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");
});

单击按钮不单击表行

3 个答案: