单击“按钮”而不是单击“表格行”

Click Button not click through to Table Row

本文关键字：单击 表格行 表格 按钮      更新时间：2023-09-26

我有一个表，用它实现了手风琴效果。其中一个细胞具有CCD_ 1。如果我点击按钮，按钮就会被点击，但表行也会被点击（这会展开/折叠手风琴）。如何防止单击通过按钮进入表格行？

这是我的点击功能：

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

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

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

添加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");
});
相关文章：