Question

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

现在因为我有一个#myGrid tbody tr的点击处理程序，而按钮（实际上只是一个图像）在tr内，当我点击按钮时，两个点击处理程序都会被执行。我该怎么做才能防止这种情况，只需执行按钮的点击处理程序，即对于＆＃34; top＆＃34;元件？

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

阻止事件冒泡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();
});

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的元素单击处理程序

3 个答案: