Question

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

Answer 1

是的，他们是不同的。

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也适用于“普通”JavaScript事件处理程序~~

event.stopPropagation()和event.preventDefault()也适用于“普通”JavaScript事件处理程序（在兼容W3C的浏览器中），而event.stopImmediatePropagation()是jQuery的扩展（更新：显然它是DOM Level 3 Events specification）的一部分。

注意： return false 阻止事件在“普通”（非jQuery）事件处理程序中冒泡（参见this answer）（但仍然阻止默认操作）。

也许值得一读：

Answer 2

返回false将停止事件冒泡，但其他绑定事件将触发。但是stopImmediatePropagation会阻止其他绑定事件触发并停止冒泡。

jsfiddle上的代码示例。

Answer 3

以下是return false，preventDefault，stopPropagation和stopImmediatePropagation的完整演示：

＆＃13;

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');
});

＆＃13;

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

＆＃13;

（也可在JSFiddle上找到。）

manwal’s answer中的表格不完全正确。

                            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**

Answer 4

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

Answer 5

@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://stackoverflow.com/a/5302939/2236219

jquery：event.stopImmediatePropagation（）vs return false

5 个答案: