Javascript e、 stopPropagation（）未按预期工作？

:

TR有

按钮有：

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

然而——尽管我写了

e.stopPropagation（）它仍然会发出警报：“行，按钮”

现在，我知道事件处理程序已附加到
主体
，并根据它检查选择器（单击按钮上的“开始”并向上移动到主体，就像
$。live
用于执行但不针对
文档
…）

但应检查
按钮
点击和
TR
点击的非

似乎在我单击时，它会传播到
“body”
（因为我将事件处理程序附加到了它），而在到达body时，它会激活对
TR
的单击

这是怎么回事？我如何保持我的代码（附在身体上）并且仍然只有“按钮”的警报

附笔。
我知道我可以简单地做到：

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

});

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

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

从jQuery文档中，在带有事件委派的
event.stopPropagation
上：

因为.live（）方法在事件传播到
在文档的顶部，无法停止的传播
现场活动。类似地，由.delegate（）处理的事件将传播
委托给他们的要素；绑定到上的事件处理程序
DOM树中它下面的任何元素都将已经执行
在调用委托事件处理程序时。这些处理者，
因此，可以通过以下方式防止委托处理程序触发：
调用event.stopPropagation（）或返回false

live
和
delegate
现在处于
开启状态，因此这一点适用。
问题在于，您正在将事件处理程序附加到
主体
，即使它委托给
.b
元素。只有在调用
tr
事件处理程序之后才调用此事件处理程序，因此停止传播为时已晚

由于我假设您希望处理动态添加的元素，并且不能简单地将事件处理程序绑定到
td
，因此我建议您：

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

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

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

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

点击我

或

点击我

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

在您的具体情况下，请使用

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

我在react TS中的解决方案

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

正如您似乎理解的那样，问题在于您将事件处理程序附加到了主体上，所以不清楚您在问什么。@dystroy我将处理程序附加到了主体上。对但我也说过“停止传播”，所以我想它应该只提醒“行”。从那个里-停止上升。委派使用事件的传播到达委派。这就是为什么不作为onload事件冒泡（传播）的事件不能与委托一起使用的原因。注意：从v17开始，e.persist（）不起任何作用，因为该事件不再被池化。来自官方文件
event.persist(); 
event.stopPropagation();