Question

我有一个包含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

}

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

Answer 1

您可以使用事件的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...
});

Answer 2

您需要在按钮内单击<{1}}

<强> event.stopPropagation（）防止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

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

Answer 3

您可以使用event.currenttarget检查当前目标并应用样式。

Answer 4

您可以通过event.target：

对其进行过滤

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

  // handle event
});

如果按钮上有jQuery事件处理程序，请使用event.stopPropagation，以便click事件不会冒出DOM树。

Answer 5

将className或id分配给button。
使用event.target.className检查原始元素是否包含className或id。仅在事件起源不是来自按钮时（当它等于按钮类，然后停止时），才触发button事件函数来设置tr的样式

tr

检查tr

5 个答案: