仅具有最高 z-index 的元素的单击处理程序答案

【问题标题】：Click handler for element with highest z-index only仅具有最高 z-index 的元素的单击处理程序
【发布时间】：2015-05-12 14:35:06
【问题描述】：

在我正在创建的页面中，有一些WebGrid 组件用作主网格，单击一行时，会显示一个详细信息区域。现在每一行也应该有一个删除按钮，点击这个按钮，该行就被删除了。

现在因为我有一个#myGrid tbody tr 的单击处理程序，并且按钮（实际上只是一个图像）在tr 内，所以当我单击按钮时两个单击处理程序都会执行。我能做些什么来防止这种情况，只执行按钮的点击处理程序，即“顶部”元素？

Here is a jsFiddle roughly demonstrating what I'm currently doing

有没有一种优雅的方法可以做到这一点，或者是否有替代我目前正在做的事情的方法？

作为参考，这里有一些更短的示例代码。 HTML：

<table id="tbl">
  <tr>
    <td><img src="someImage.png" class="delete-button" /></td>
  </tr>
</table>

JavaScript：

$(document).ready(function () {
  $("#tbl tr").click(function () {
    alert("row click");
  });
  $(".delete-button").click(function () {
    alert("delete-button click");
  });
})

【问题讨论】：

请附上您的代码。

标签： javascript jquery html css jquery-selectors

【解决方案1】：

使用stopPropagation

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

$(".delete-button").click(function (e) {
    //                              ^
    alert("delete-button click");
    e.stopPropagation();
    // ^^^^^^^^^^^^^^^^
});

https://jsfiddle.net/tusharj/nbvdw0q1/3/

文档：http://api.jquery.com/event.stopPropagation/

【讨论】：

【解决方案2】：

您只需要停止传播包含按钮的元素的点击事件：

$(".delete-button").click(function (event) {
    alert("delete-button click");
    event.stopPropagation();
});

Updated fiddle.

【讨论】：

【解决方案3】：

您可以只捕获父点击，然后将事件目标与删除按钮进行比较。

(Demo)

$("#tbl tr").hover(function() {
  $(this).toggleClass("clickable");
}).click(function(e) {
  if ($(e.target) === $('.delete-button')) {
    alert("delete-button click");
  } else {
    alert("row click");
  }
});

【讨论】：