javascript - jQuery:可点击行的问题

Question

我有一个表，每行都有一个类“myClass”，通过单击表行来触发 jQuery 函数。

到目前为止，这工作正常，我遇到的唯一问题是某些表格单元格包含按钮，然后单击按钮也会触发上述事件。

有什么方法可以防止当我单击该行中的按钮时触发行单击事件？ 我只想通过单击行背景来触发事件，而不是通过单击行中的任何按钮来触发事件。

非常感谢蒂姆提供的任何帮助。

Answer 1

在 click 事件处理程序的顶部，输入以下内容:

if ($(event.target).prop('type').toLowerCase() !== 'table' ||
    ! $(event.target).hasClass('myClass')) {
    event.stopImmediatePropagation();
    return;
}

它的作用是说“如果实际元素不是表或没有类“myClass”，则立即停止事件(return 部分)。 stopImmediatePropagation() 意味着它不会传播回原始选择器(在本例中为“table.myClass”)。

如果您希望用户能够单击表格内除按钮之外的任何内容，您可以使用以下命令:

if ($(event.target).prop('type').toLowerCase() === 'button') {
    event.stopImmediatePropagation();
    return;
}

这将允许点击其他元素(如输入、图像、跨度、div 等)仍然触发它。如果这不是所需的行为，您应该考虑将单击事件放在表格单元格上而不是整个表格上，然后检查目标类型是否不是 td。