3

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

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/

4

5 回答 5

5

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/

于 2011-10-13T08:41:11.197 回答
2

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

所以，因为事件已经冒泡了，你不能阻止它们在源头传播（因为它们必须传播才能工作）。

于 2011-10-13T08:40:12.557 回答
1

来自jQuery.delegate()文档：

由于 .live() 方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，由 .delegate() 处理的事件将传播到它们被委托的元素；在调用委托的事件处理程序时，绑定在 DOM 树中它下面的任何元素上的事件处理程序将已经被执行。

一种可能的解决方案是不将事件处理程序附加到a, 而是附加#test在event.target.

我已经用这种方法更新了你的小提琴。

   $('#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
    });
于 2011-10-13T08:40:46.733 回答
0

live 和 delegate 函数不能 e.stopPropagation();像“正常”事件那样处理调用。来自委托文档-

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

于 2011-10-13T08:42:22.633 回答
-1

为什么不使用

.live()

功能？

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

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

于 2011-10-13T08:42:19.643 回答