jQuery e.stopPropagation() 没有按预期工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17021835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
e.stopPropagation() is not working as expected?
提问by Royi Namir
The TR has <tr onclick='alert("row");'>
TR 有 <tr onclick='alert("row");'>
And the button has :
按钮有：
$("body").on('click',".b",function (e){
alert('button');
e.stopPropagation();
});
However - Although I wrote e.stopPropagation();it still alerts : "row , button".
但是 - 虽然我写了e.stopPropagation();它仍然警告：“行，按钮”。
Now , I know that the event handler is attached to the bodyand the selector is checked against it ( the click start at the button and move up to the body , just like $.liveuse to do but against document...).
现在，我知道事件处理程序已附加到body并且选择器会根据它进行检查（单击从按钮开始并向上移动到 body ，就像$.live用来做但反对document......一样）。
But the checking should be for the buttonclick and notfor the TRclick.
但检查应该是button点击不为TR点击。
It seems that while i'm clicking , it propagates to the "body"( because I attached event handler to it) and while its way up to the bodyit activates the click on the TR.
似乎当我点击时，它会传播到"body"（因为我将事件处理程序附加到它），并且当它到达正文时，它会激活TR.
What is going on here? How can I keep my code ( attach to body) and still have only alert of "button".
这里发生了什么？如何保留我的代码（附加到正文）并且仍然只有“按钮”警报。
P.s.
ps
I know I can simply do :
我知道我可以简单地做：
$(".b").on('click',function (e){
alert('button');
e.stopPropagation();
});
but I want to know why my current(!) code doesnt work.
但我想知道为什么我当前的（！）代码不起作用。
回答by Denys Séguret
The problem is that you're attaching the event handler to the body, even if it delegates to the .belement. This event handler is called only after the trevent handler is called, so it's too late to stop propagation.
问题是您将事件处理程序附加到body，即使它委托给.b元素。只有在调用事件处理程序后才会调用此事件处理tr程序，因此停止传播为时已晚。
As I suppose you want to deal with dynamically added elements and can't simply bind the event handler to the td, I can suggest you this :
因为我想您想处理动态添加的元素并且不能简单地将事件处理程序绑定到td，我可以建议您这样做：
$('body').on('click',"tr",function (e){
alert('row');
});
$("body").on('click',".b",function (e){
alert('button');
e.stopPropagation();
});
回答by elclanrs
...but I want to know why my current(!) code doesnt work.
...但我想知道为什么我当前的（！）代码不起作用。
From jQuery docs, on event.stopPropagationwith event delegation:
从 jQuery 文档开始，关于event.stopPropagation事件委托：
Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below itin the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.
由于 .live() 方法在事件传播到文档顶部后处理事件，因此不可能停止实时事件的传播。类似地，由 .delegate() 处理的事件将传播到它们被委托的元素；绑定在DOM 树中它下面的任何元素上的事件处理程序将在 调用委托的事件处理程序时已经执行。因此，这些处理程序可能会通过调用 event.stopPropagation() 或返回 false 来阻止委托的处理程序触发。
liveand delegateare now onso this applies.
live并且delegate现在on如此适用。
回答by Tahir Alvi
If you want to stop the event propagation from child to parent, then you may use this code.
如果要停止从子级到父级的事件传播，则可以使用此代码。
Let's say you have a select, button, or any other click event inside a div etc. Then Write the below code code on onclick method.
假设您在 div 等中有一个选择、按钮或任何其他点击事件。然后在 onclick 方法上编写以下代码。
<button type="button" onclick="event.cancelBubble = true;" >Click Me </button>
or
或者
<button type="button" onclick="event.cancelBubble = true; doSomething();" >Click Me </button>
you can replace button with any HTML input or other element.
您可以用任何 HTML 输入或其他元素替换按钮。
in your specific case use
在您的特定情况下使用
<tr onclick='event.cancelBubble = true; alert("row");'>
回答by Kuza Grave
my solution in react TS
我在反应 TS 中的解决方案
event.persist();
event.stopPropagation();
