Question

我试图阻止某些事件，但stopPropagation不适用于“live”，所以我不知道该怎么办。我在他们的网站上发现了这个。

直播活动不会冒泡传统的方式并不可能停止使用stopPropagation或 stopImmediatePropagation。例如，以两次点击事件为例 - 一个绑定到“li”和另一个“li a”。是否应该在内部发生咔嗒声将触发两个BOTH事件。这是因为当一个 $（“li”）。bind（“click”，fn）;受约束你实际上在说“每当一个在LI元素上发生click事件 - 或者在LI元素内 - 触发它点击事件。“进一步停止处理现场活动，fn必须返回错误

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

Answer 1

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

问题

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

_{（来源：shog9.com）}

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

解决方案

这里你最好的选择（据我所知你发布的内容）是对两个点击处理程序使用实时绑定。完成后，您应该能够从 .MoreAppointments 处理程序return false来阻止调用 .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); });

Answer 2

我已经使用了这种代码，它对我有用：

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

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

所以，在我看来，现在JQuery支持使用直播事件的stopImmediatePropagation

Answer 3

也许您可以检查a元素上没有发生点击事件：

$('#CalendarBody .DateBox').click(function(e) {
  // if the event target is an <a> don't process:
  if ($(e.target).is('a')) return;

  AddApointment(this);
});

可能会工作吗？

Answer 4

我正在使用它：

if(event.target != this)return; // stop event bubbling for "live" event

Answer 5

我用

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)

Answer 6

我在某些情况下使用过它。注意：并非始终适用，因此请始终评估您的需求：

HTML：

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

js（在你的直播事件处理程序中）：

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

这样，当点击特定的元素类型/ classname attr时，我的直播事件才会“运行”。

此处的e.preventDefault()是停止链接我点击将滚动位置移动到页面顶部。

Answer 7

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.

如何用jquery live停止事件冒泡？

7 个答案:

问题

解决方案

实施例