检查点击事件是否由 tr 中的按钮发起

Check if click event originated by button inside tr

本文关键字：按钮 tr 事件 是否 检查点      更新时间：2023-09-26

我有一个包含 5 列的 html 表。在一列中，我有一个按钮。当我单击该行时，使用 jquery 我在该行上应用 css(我选择了该行(。但是当我单击该行上的按钮时，我不想将样式应用于该行。

现在我检查我是否像这样单击该行：

$('#mytable tbody').on('click', 'tr', function (event) {
    //If the click originated by the button don't apply stile
    //...
    //...else apply the style on tr
}

在函数内部，如何检查点击是否由按钮发起？

可以使用事件的 target 属性来确定引发冒泡事件的元素。试试这个：

$('#mytable tbody').on('click', 'tr', function (e) {
    if (e.target.nodeName == 'BUTTON') {
        // the button was clicked...
    }
});

或者，您可以在单击按钮时使用stopPropagation：

$('#mytable tbody').on('click', 'button', function (e) {
    e.stopPropagation();
    // other logic...
});

您需要在按钮单击中使用event.stopPropagation()

event.stopPropagation(( 防止事件在 DOM 树中冒泡，防止任何 父处理程序不会收到事件通知。

来源 ： https://api.jquery.com/event.stoppropagation/

您可以使用

event.currenttarget检查当前目标并应用样式。

您可以通过event.target过滤它：

$('#mytable tbody').on('click', 'tr', function (event) {
  if (event.target.nodeName != 'TR') return;
  // handle event
});

如果按钮上有 jQuery 事件处理程序，请使用 event.stopPropagation，这样 click 事件就不会在 DOM 树中冒泡。

  1. 为button分配className或id。
  2. 使用 event.target.className 检查原始元素是否包含您提供给button的className或id。仅当事件源不是来自按钮时，才触发 tr 事件函数以设置tr样式(当它等于按钮类时，然后停止(
if(event.target.className===<className>) {
     //exit the function
    return
} else {
    //do the styling
}
相关文章：