Question

当您单击div中的链接时，我尝试阻止jq click()。

HTML

<div id="all">
    <div id="test">
        <a href="http://google.de">google</a>
    </div>
</div>

JS

$('#test').click(function() { alert('only when i click the div');  });

$('a').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

此代码效果很好，但我的内容是动态的，所以我需要一个delegate()解决方案。

下面的代码不起作用。但为什么？问题是什么？

$('#all').delegate("a", "click", function(e)
{
    e.stopPropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

示例
http://jsfiddle.net/Lf3hL/13/

Answer 1

stopPropagation不适用于委托 - http://api.jquery.com/event.stopPropagation/

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，.delegate（）处理的事件将传播到它们被委派给的元素;在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行。因此，这些处理程序可以通过调用event.stopPropagation（）或返回false来阻止委托处理程序触发。

现在，如果您更改测试，请单击以使用委托并使用stopImmediatePropagation它将起作用

$('#all').delegate('#test', 'click' ,function() {
    alert('only when i click on the div');
});    

$('#all').delegate("a", "click", function(e)
{
    e.stopImmediatePropagation();
    e.preventDefault();
    $('body').append(e.target.href);
});

http://jsfiddle.net/Lf3hL/14/

Answer 2

因为delegate()通过让事件冒泡而起作用，然后在祖先元素（示例中为#all）上处理它们。

所以，因为事件已经冒出来了，你无法阻止它们在源头传播（因为它们必须传播到工作中）。

Answer 3

来自jQuery .delegate() doc：

由于.live（）方法在传播到的事件后处理它们在文档的顶部，不可能停止传播现场活动。同样，.delegate（）处理的事件也会传播他们被委派的要素;事件处理程序绑定 DOM树下面的任何元素都已经被执行了在调用委托事件处理程序时。

一种可能的解决方案是不在a上附加事件处理程序，而是在#test上附加，并检查event.target。

我使用此方法updated your Fiddle。

   $('#test').click(function(e) {
        if ($(e.target).is('a')) {
            alert('link was clicked');
        }
        else {
            alert('only when i click on the div');
        }

        e.preventDefault(); //just to cancel the link's default action
    });

Answer 4

实时和委托功能无法像“正常”事件那样处理e.stopPropagation();调用。来自代表docs -

由于.live（）方法在传播到的事件后处理它们在文档的顶部，不可能停止传播现场活动。同样，.delegate（）处理的事件也会传播他们被委派的要素;事件处理程序绑定 DOM树下面的任何元素都已经被执行了到调用委托事件处理程序时。这些处理程序，因此，可能会阻止委托的处理程序触发调用event.stopPropagation（）或返回false。

Answer 5

为什么不使用

.live()

功能

 $('a').live('click', function() {
     // Live handler called.
 });

将为完全加载正文后添加的所有标记添加点击功能。

Jquery - 将委托绑定到所有“a”标记

5 个答案: