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

Question

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

现在因为我有一个 #myGrid tbody tr 的点击处理程序，并且按钮（实际上只是一个图像）在 tr 内，当我点击按钮时，两个点击处理程序都会执行.我该怎么做才能防止这种情况发生，只需执行按钮的点击处理程序，即 "top" 元素？

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");
  });
})

Answer 1

使用stopPropagation

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(".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

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

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

Updated fiddle.

Answer 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");
  }
});

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

Click handler for element with highest z-index only

html

javascript

css

jquery

jquery-selectors