Javascript 如何使用 jquery live 停止事件冒泡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1967537/
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
How to stop event bubbling with jquery live?
提问by chobo2
I am trying to stop some events but stopPropagation does not work with "live" so I am not sure what to do. I found this on their site.
我试图停止一些事件，但 stopPropagation 不适用于“live”，所以我不知道该怎么做。我在他们的网站上找到了这个。
Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click event." To stop further processing for a live event, fn must return false
实时事件不会以传统方式冒泡，并且无法使用 stopPropagation 或 stopImmediatePropagation 停止。例如，以两个点击事件为例——一个绑定到“li”，另一个绑定到“li a”。如果在内部锚点上发生点击，则将触发两个事件。这是因为当 $("li").bind("click", fn); 绑定您实际上是在说“每当 LI 元素上或 LI 元素内发生单击事件时，都会触发此单击事件。” 要停止对直播事件的进一步处理，fn 必须返回 false
It says that fn must return false so what I tried to do
它说 fn 必须返回 false 所以我试图做的
$('.MoreAppointments').live('click', function(e) {
alert("Hi");
return false;
});
but that did not work so I am not sure how to make it return false.
但这不起作用，所以我不知道如何让它返回 false。
Update
更新
Here is some more information.
这里有更多信息。
I have a table cell and I bind a click event to it.
我有一个表格单元格，并为其绑定了一个点击事件。
$('#CalendarBody .DateBox').click(function(e)
{
AddApointment(this);
});
So the AddApointment just makes some ui dialog box.
所以 AddApointment 只是制作了一些 ui 对话框。
Now the live code(MoreAppointments) sits in this table cell and is basically an anchor tag. So when I click on the anchor tag it first goes to the above code(addApointment - so runs that event first) runs that but does not launch my dialog box instead it goes straight to the (MoreAppointment) event and runs that code. Once that code has run it launches the dialog box from "addApointment".
现在实时代码（MoreAppointments）位于这个表格单元格中，基本上是一个锚标签。因此，当我单击锚标记时，它首先转到上面的代码（addApointment - 所以首先运行该事件）运行该代码，但不启动我的对话框，而是直接转到（MoreAppointment）事件并运行该代码。该代码运行后，它会从“addApointment”启动对话框。
Update 2
更新 2
Here is some of the html. I did not copy the whole table since it is kinda big and all the cells repeat itself with the same data. If needed I will post it.
这是一些html。我没有复制整个表格，因为它有点大，而且所有的单元格都用相同的数据重复。如果需要我会发布它。
<td id="c_12012009" class="DateBox">
<div class="DateLabel">
1</div>
<div class="appointmentContainer">
<a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a><a class="appointments">Fkafkafk fakfka kf414<br />
</a>
</div>
<div class="appointmentOverflowContainer">
<div>
<a class="MoreAppointments">+1 More</a></div>
</div>
</td>
回答by Shog9
The short answer is simply, you can't.
简短的回答很简单，你不能。
The problem
问题
Normally, you can stop an event from "bubbling up" to event handlers on outer elements because the handlers for inner elements are called first. However, jQuery's "live events" work by attaching a proxy handler for the desired event to the document element, and then calling the appropriate user-defined handler(s) after the event bubbles up the document.
通常，您可以阻止事件“冒泡”到外部元素上的事件处理程序，因为内部元素的处理程序首先被调用。但是，jQuery 的“实时事件”的工作方式是将所需事件的代理处理程序附加到文档元素，然后在事件使文档冒泡后调用适当的用户定义处理程序。
(source: shog9.com)
（来源：shog9.com）
This generally makes "live" binding a rather efficient means of binding events, but it has two big side-effects: first, any event handler attached to an inner element can prevent "live" events from firing for itself or any of its children; second, a "live" event handler cannot prevent any event handlers attached directly to children of the document from firing. You can stop further processing, but you can't do anything about processing that has already occurred... And by the time your live event fires, the handler attached directly to the child has already been called.
这通常使“实时”绑定成为一种相当有效的绑定事件的方法，但它有两个很大的副作用：首先，附加到内部元素的任何事件处理程序都可以防止“实时”事件为自身或其任何子元素触发；其次，“实时”事件处理程序无法阻止直接附加到文档子项的任何事件处理程序触发。您可以停止进一步的处理，但您不能对已经发生的处理做任何事情......当您的实时事件触发时，直接附加到子级的处理程序已经被调用。
Solution
解决方案
Your best option here (so far as I can tell from what you've posted) is to use live binding for both click handlers. Once that's done, you should be able to return falsefrom the .MoreAppointmentshandler to prevent the .DateBoxhandler from being called.
您在这里的最佳选择（据我从您发布的内容中可以看出）是对两个点击处理程序使用实时绑定。完成后，您应该能够return false从.MoreAppointments处理程序中阻止.DateBox处理程序被调用。
Example:
例子：
$('.MoreAppointments').live('click', function(e)
{
alert("Hi");
return false; // prevent additional live handlers from firing
});
// use live binding to allow the above handler to preempt
$('#CalendarBody .DateBox').live('click', function(e)
{
AddApointment(this);
});
回答by Andrey Zavarin
I've used such kind if code and it worked for me:
我使用过这种 if 代码并且它对我有用：
$('#some-link').live('click', function(e) {
alert("Link clicked 1");
e.stopImmediatePropagation();
});
$('#some-link').live('click', function(e) {
alert("Link clicked 2");
});
so, it seems to me, that now JQuery support stopImmediatePropagation with live events
所以，在我看来，现在 JQuery 支持带有实时事件的 stopImmediatePropagation
回答by gnarf
Maybe you could check that the click event didn't occur on an aelement:
也许您可以检查一下a元素上是否没有发生 click 事件：
$('#CalendarBody .DateBox').click(function(e) {
// if the event target is an <a> don't process:
if ($(e.target).is('a')) return;
AddApointment(this);
});
Might Work?
可能工作吗？
回答by RainChen
I'm using this:
我正在使用这个：
if(event.target != this)return; // stop event bubbling for "live" event
回答by Dave
I've used this in certain situations. Note: not always applicable, so assess for your needs as always:
我在某些情况下使用过这个。注意：并非总是适用，因此请一如既往地评估您的需求：
html:
html：
<a href="#" className="my-class-name">Click me</a>
js (in your live event handler):
js（在您的实时事件处理程序中）：
if(e.target.className == 'my-class-name') {
e.preventDefault();
// do something you want to do...
}
This way, my live event only 'runs' when a particular element type/classname attr is clicked.
这样，我的实时事件仅在单击特定元素类型/类名属性时“运行”。
The e.preventDefault()here is to stop the link I'm clicking moving the scroll-position to the top of the page.
在e.preventDefault()这里停止，我点击移动滚动位置到页面顶部的链接。
回答by shinkou
I use
我用
e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
回答by Umesh K.
Simply use **"on"** function to bind click event of child as well as parent element.
Example : $("#content-container").on("click","a.childElement",function(e){
alert("child clicked");
e.stopPropagation() ;
});
$("#content-container").on("click","div.parentElement",function(e){
alert("parent clicked");
});
( where content-container is the outer div containing both parent as well as child elements. )
Here only "child clicked" alert will occur.
Thanks.
