jQuery - 为什么委托传播,即使在调用`e.preventDefault`之后？

Question

我有一个带嵌套链接的div.div有一个delegate处理程序'click',用于警告"Div".div中的链接还有一个delegate处理程序,用于在警告"链接"之前调用'click'其中e.preventDefault();.当我点击链接时,我会看到"Div"警报和"Div"警报.我不清楚为什么会发生这种情况,因为我试图阻止链接点击处理程序的传播.

JavaScript的

$('body').delegate('.outer', 'click', function(e){
    e.preventDefault();
    alert('Div');
});

$('body').delegate('.outer a', 'click', function(e){
    e.preventDefault();
    alert('Link');
    // Note: I've also tried returning false (vs using preventDefault), per the docs
});

HTML

<div class="outer">
    <a href="#">Click me</a>
</div>

Answer 1

1. PreventDefault不会停止传播,它会停止执行默认操作.

2. 返回false/stopPropagation对委派/实时事件不起作用,因为当它到达定义事件的元素时,它已经传播了.它将停止传播到DOM中更高的元素,但不会阻止调用相同级别(或更低级别)的处理程序.请参阅http://api.jquery.com/delegate文档.

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

3. 如果您不希望运行相同级别/ DOM元素的其他处理程序,则可以使用stopImmediatePropagation.请注意,处理程序的应用顺序非常重要.

4. 您可能应该使用on(),而不是jQuery 1.7中的delegate/live.