javascript jquery：event.stopImmediatePropagation() 与返回 false

jquery: event.stopImmediatePropagation() vs return false

提问by Arjun

Is there any difference between calling event.stopImmediatePropagation()and return falseinside an event handler ?

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

回答by Felix Kling

Yes they are different.

是的，它们是不同的。

return falseis basically the same as calling both, event.stopPropagation()and event.preventDefault().

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

Whereas event.stopImmediatePropagation()is the same as event.stopPropagation()pluspreventing other registered event handlers on the same element to be executed. So it does not prevent the default action for an event, such as following a clicked link.

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

In short:

简而言之：

                            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 falsealso works in "normal" JavaScript event handlers

return false也适用于“普通”JavaScript 事件处理程序

event.stopPropagation()and event.preventDefault()also work in "normal" JavaScript event handlers (in a W3C compatible browser), whereas event.stopImmediatePropagation()is an extension from jQuery (update:apparently it is part of the DOM Level 3 Events specification).

event.stopPropagation()并且event.preventDefault()还可以在“普通”JavaScript 事件处理程序中工作（在 W3C 兼容浏览器中），而它是event.stopImmediatePropagation()来自 jQuery 的扩展（更新：显然它是DOM Level 3 Events 规范的一部分）。

Note:return falsedoes notprevent the event from bubbling up in "normal"(non-jQuery) event handlers (see this answer)(but still prevents the default action).

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

---

---

Maybe worth reading:

也许值得一读：

• jQuery Events: Stop (Mis)Using Return False
• quirksmode.org - Event order

• jQuery 事件：停止（错误）使用 Return False
• quirksmode.org - 事件顺序

回答by Mark Coleman

Returning falsewill stop event bubbling, but other bound events will fire. However stopImmediatePropagationprevents other bound events from firing and stops bubbling.

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

Code Example of this on jsfiddle.

jsfiddle上的代码示例。

回答by kshirish

Here is the complete demo for return false, preventDefault, stopPropagationand stopImmediatePropagation:

下面是完整的演示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>

(Also available on JSFiddle.)

（也可在JSFiddle上使用。）

The table in manwal's answeris not fully correct.

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

回答by Manwal

@FelixKling answer's table having great concept:

@FelixKling 答案的表格有很好的概念：

I am posting more explained table:

我发布了更多解释表：

                            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

Reference: https://stackoverflow.com/a/5302939/2236219

参考：https: //stackoverflow.com/a/5302939/2236219

回答by gailbear

Yes. event.stopImmediatePropagation() won't let any other handlers for that event be called, regardless of where they are bound. Return false only stops handlers bound to other elements (ie not the same element as the event handler dealing with the stopImmediatePropagation() call) from receiving the event.

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