30

我正在尝试停止一些事件，但 stopPropagation 不适用于“实时”，所以我不知道该怎么做。我在他们的网站上找到了这个。

实时事件不会以传统方式冒泡，并且无法使用 stopPropagation 或 stopImmediatePropagation 停止。例如，以两个点击事件为例——一个绑定到“li”，另一个绑定到“li a”。如果点击内部锚点，两个事件都会被触发。这是因为当一个 $("li").bind("click", fn); 绑定你实际上是在说“每当 LI 元素或 LI 元素内部发生点击事件时 - 触发此点击事件。” 要停止对实时事件的进一步处理，fn 必须返回 false

它说 fn 必须返回 false 所以我试图做的

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

但这没有用，所以我不确定如何让它返回 false。

更新

这是更多信息。

我有一个表格单元格，并将单击事件绑定到它。

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

所以 AddApointment 只是制作了一些 ui 对话框。

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

更新 2

这是一些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>
4

7 回答 7

52

简短的回答很简单，你不能。

问题

通常，您可以阻止事件“冒泡”到外部元素上的事件处理程序，因为内部元素的处理程序首先被调用。但是，jQuery 的“实时事件”通过将所需事件的代理处理程序附加到文档元素，然后在事件冒泡文档后调用适当的用户定义处理程序来工作。

冒泡图
（来源：shog9.com）

这通常使“实时”绑定成为一种相当有效的事件绑定方式，但它有两个很大的副作用：首先，任何附加到内部元素的事件处理程序都可以阻止“实时”事件为其自身或其任何子元素触发；其次，“实时”事件处理程序不能阻止直接附加到文档子项的任何事件处理程序触发。你可以停止进一步的处理，但你不能对已经发生的处理做任何事情......当你的实时事件触发时，直接附加到孩子的处理程序已经被调用。

解决方案

您在这里最好的选择（据我所知，您发布的内容）是对两个点击处理程序使用实时绑定。完成后，您应该能够return false从.MoreAppointments处理程序中阻止调用.DateBox处理程序。

例子：

$('.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);
});
于 2009-12-28T02:13:16.563 回答
7

我使用过这种 if 代码，它对我有用：

$('#some-link').live('click', function(e) {
    alert("Link clicked 1");
    e.stopImmediatePropagation();
});

$('#some-link').live('click', function(e) {
    alert("Link clicked 2");    
});

所以，在我看来，现在 JQuery 支持带有实时事件的 stopImmediatePropagation

于 2011-08-09T16:15:20.547 回答
5

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);
});

可能工作？

于 2009-12-28T01:27:14.440 回答
3

我正在使用这个：

if(event.target != this)return; // stop event bubbling for "live" event
于 2012-03-26T09:03:30.017 回答
1

我用

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
于 2009-12-28T01:40:44.590 回答
1

我在某些情况下使用过这个。注意：并非总是适用，因此请一如既往地评估您的需求：

html:

<a href="#" className="my-class-name">Click me</a>

Node.js（在您的实时事件处理程序中）：

if(e.target.className == 'my-class-name') {
    e.preventDefault();
    // do something you want to do...
}

这样，我的实时事件仅在单击特定元素类型/类名 attr 时“运行”。

这里e.preventDefault()是停止我单击的链接，将滚动位置移动到页面顶部。

于 2013-02-28T12:51:14.887 回答
0 
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.
于 2014-08-21T06:40:32.440 回答