仅具有最高z索引的元素的点击处理程序

Question

在我正在创建的页面中，有一些WebGrid组件充当主网格，并且在单击一行时会显示一个详细信息区域。 现在，每行还应该有一个删除按钮，以便单击此按钮，该行将被删除。

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

这是一个jsFiddle粗略地展示了我目前在做什么

是否有一种优雅的方法可以执行此操作，或者是否可以替代我目前正在执行的操作？

作为参考，这里有一些更短的示例代码。 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");
  });
})

Answer 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/

Answer 2

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

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

更新了小提琴。

Answer 3

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

（ 演示 ）

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