e.stopPropagation（）没有按预期工作？

Question

I have a simple table：

TR有<tr onclick='alert("row");'>

按钮有：

$("body").on('click',".b",function (e){
  alert('button');
  e.stopPropagation();
});

然而 - 虽然我写了e.stopPropagation();，但它仍然警告：“行，按钮”。

现在，我知道事件处理程序已附加到body并且选中了选择器（按钮处的点击开始并向上移动到正文，就像$.live使用的那样但要反对document ...）。

但检查应针对button点击，不进行TR点击。

似乎在我点击的同时，它会传播到"body"（因为我附加了事件处理程序）和，同时它向身体它会激活点击TR。

这里发生了什么？如何保存我的代码（附加到正文）并且仍然只有“按钮”的警告。

P.S。

我知道我可以做到：

$(".b").on('click',function (e){
  alert('button');
  e.stopPropagation();

});

但我想知道为什么我当前的（！）代码不起作用。

Answer 1

问题在于您将事件处理程序附加到body，即使它委托给.b元素也是如此。只有在调用tr事件处理程序后才会调用此事件处理程序，因此停止传播为时已晚。

正如我想你想要处理动态添加的元素而不能简单地将事件处理程序绑定到td，我建议你这样做：

$('body').on('click',"tr",function (e){
  alert('row');
});
$("body").on('click',".b",function (e){
  alert('button');
  e.stopPropagation();
});

Demonstration

Answer 2

  

...但我想知道为什么我当前的（！）代码无效。

来自jQuery文档，在event.stopPropagation上使用事件委派：

  

由于.live（）方法在传播到的事件后处理它们   在文档的顶部，不可能停止传播   现场活动。同样，.delegate（）处理的事件也会传播   他们被委派的要素;事件处理程序绑定   DOM树中的其下面的任何元素已经被执行过了   到调用委托事件处理程序时。这些处理程序，   因此，可能会阻止委托的处理程序触发   调用event.stopPropagation（）或返回false。

live和delegate现在为on，因此适用。

Answer 3

如果要停止事件从子级传播到父级，则可以使用此代码。

假设您在div等内部有一个select，button或任何其他click事件。然后在onclick方法上编写以下代码。

<button type="button" onclick="event.cancelBubble = true;" >Click Me </button>

或

<button type="button" onclick="event.cancelBubble = true; doSomething();" >Click Me </button>

您可以将按钮替换为任何HTML输入或其他元素。

在您的特定情况下使用

<tr onclick='event.cancelBubble = true; alert("row");'>

Answer 4

我在React TS中的解决方案

event.persist(); 
event.stopPropagation();