jQuery：event.stopImmediatePropagation()与return false的区别

Question

jQuery：event.stopImmediatePropagation()与return false的区别

javascriptjqueryevents

60

在事件处理程序中调用 event.stopImmediatePropagation() 和使用 return false 有什么区别吗？

- Arjun

5个回答

4

如果返回 false，则会停止事件冒泡，但其他绑定的事件将被触发。然而，stopImmediatePropagation 阻止其他绑定的事件触发并停止冒泡。

这个 jsfiddle 上的代码示例。

- Mark Coleman

1

这里是关于 return false, preventDefault, stopPropagation 和 stopImmediatePropagation 的完整演示:

var kid = document.getElementsByTagName('button')[0];
var dad = document.getElementsByTagName('div')[0];

kid.addEventListener('click', function(e) {
    console.log('kid here');
    e.stopImmediatePropagation();
});

kid.addEventListener('click', function(e) {
    console.log('neighbour kid here');
});

dad.addEventListener('click', function(e) {
   console.log('dad here');
});

dad.addEventListener('click', function(e) {
   console.log('neighbour dad here');
});

<div>
    <button>press</button>
</div>

（同时也可以在JSFiddle上找到。）

manwal的答案中的表格并不完全正确。

                            stop   |    prevent     |       prevent
                          bubbling | default action |    event handlers
                                   |                |  Same Element  |  Parent Element

return false                 Yes           Yes               No           No
preventDefault               No            Yes               No           No
stopPropagation              Yes           No                No           Yes
stopImmediatePropagation     Yes           No                Yes          **Yes**

- kshirish

0

@FelixKling的回答中提到了一个很棒的表格概念：

我会发布更详细的表格：

                            stop   |    prevent     |       prevent          |
                          bubbling | default action |    event handlers      |
                                                     Same Element  |  Parent Element

return false                 Yes           Yes             No           No
preventDefault               No            Yes             No           No
stopPropagation              Yes           No              No           Yes
stopImmediatePropagation     Yes           No              Yes          No

参考资料：https://dev59.com/SW435IYBdhLWcg3wohpT#5302939

- Manwal

0

是的。event.stopImmediatePropagation()会阻止任何其他处理程序调用该事件，无论它们绑定在哪里。而返回false仅会阻止绑定到其他元素（即与处理stopImmediatePropagation()调用的事件处理程序不同的元素）的处理程序接收事件。

- gailbear

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Kling · Accepted Answer

是的，它们是不同的。

return false 基本上等同于同时调用 event.stopPropagation() 和 event.preventDefault()。

而 event.stopImmediatePropagation() 则相当于执行 event.stopPropagation() 加上阻止同一元素上注册的其他事件处理程序被执行。因此，它不会阻止事件的默认操作，例如跟随已单击的链接。

简而言之：

                            stop   |    prevent     | prevent "same element"
                          bubbling | default action | event handlers

return false                 Yes           Yes             No
preventDefault               No            Yes             No
stopPropagation              Yes           No              No
stopImmediatePropagation     Yes           No              Yes

~~return false also works in "normal" JavaScript event handlers~~

event.stopPropagation() 和 event.preventDefault() 在“普通”的JavaScript事件处理程序中也可以正常工作（在符合W3C标准的浏览器中），而event.stopImmediatePropagation() 是jQuery扩展的功能（更新：显然它是DOM Level 3 Events specification 的一部分）。

注意：return false 不能阻止事件在“正常”（非jQuery）事件处理程序中冒泡（请参见此答案）（但仍然会阻止默认操作）。

可能值得阅读：