如何停止事件冒泡与jquery活？ [英] How to stop event bubbling with jquery live?

问题描述

我正在尝试停止一些事件，但是StopPropagation与live无效，所以我不知道该怎么办。我在他们的网站上找到了这个。

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或
stopImmediatePropagation。例如，
考虑两个点击事件 -
一个绑定到li和另一个li a。
如果在内部
上发生点击，BOTH事件将被触发。
这是因为当一个
$（li）。bind（click，fn）;绑定
你实际上说每当一个
点击事件发生在LI元素 -
或LI元素内部 - 触发此
点击事件。要停止进一步的
处理一个现场活动，fn必须
返回false

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

它说fn必须返回虚假，所以我试图做的

It says that fn must return false so what I tried to do

 $('.MoreAppointments').live('click', function(e) {
   alert("Hi");
   return false;
 });

但是没有工作，所以我不知道如何使它返回false。

but that did not work so I am not sure how to make it return false.

更新

以下是更多信息。

我有一个表格单元格，我绑定一个点击事件。

I have a table cell and I bind a click event to it.

 $('#CalendarBody .DateBox').click(function(e)
    {
        AddApointment(this);
    });

所以AddApointment只是使一些ui对话框。

So the AddApointment just makes some ui dialog box.

现在的代码（MoreAppointments）位于这个表单元格中，基本上是一个锚标签。所以当我点击锚标签时，它首先转到上面的代码（addApointment - 所以首先运行该事件），但不会启动我的对话框，而是直接进入（MoreAppointment）事件并运行该代码。一旦该代码运行，它将从addApointment启动对话框。

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".

更新2

这是一些html。我没有复制整个表，因为它有点大，所有的单元格重复自己的相同的数据。如果需要，我会发布。

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.

 <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>

推荐答案

简而言之，简单的答案就是T 。

The short answer is simply, you can't.

通常情况下，您可以阻止事件从冒泡到外部元素上的事件处理程序因为内部元素的处理程序称为第一个。但是，jQuery的live event可以通过将所需事件的代理处理程序附加到文档元素，然后在事件引发文档之后调用相应的用户定义的处理程序。

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.

冒泡说明http://shog9.com/so_1967537_bubbling.png

这通常使活绑定绑定事件相当有效的手段，但它有两个重大的副作用：首先，附加到内部元素的任何事件处理程序防止活事件本身或其任何儿童射击;第二，一个活事件处理程序不能阻止任何直接附加到文档的孩子的事件处理程序触发。您可以停止进一步的处理，但是您无法对已经发生的处理做任何事情...而在直播活动触发的时候，直接附加到子的处理程序已经被调用了。

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.

您最好的选择（据我所知）为两个点击处理程序使用实时绑定。一旦这样做，您应该可以从 .MoreAppointments 处理程序中的返回false ，以防止 .DateBox 处理程序被叫。

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 false from the .MoreAppointments handler to prevent the .DateBox handler from being called.

$('.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);
});

这篇关于如何停止事件冒泡与jquery活？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！