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

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/