event.stopImmediatePropagation()
和使用 return false
有什么区别吗?event.stopImmediatePropagation()
和使用 return false
有什么区别吗?是的,它们是不同的。
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)事件处理程序中冒泡(请参见此答案)(但仍然会阻止默认操作)。
可能值得阅读:
如果返回 false
,则会停止事件冒泡,但其他绑定的事件将被触发。然而,stopImmediatePropagation
阻止其他绑定的事件触发并停止冒泡。
这个 jsfiddle 上的代码示例。
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**
@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
是的。event.stopImmediatePropagation()会阻止任何其他处理程序调用该事件,无论它们绑定在哪里。而返回false仅会阻止绑定到其他元素(即与处理stopImmediatePropagation()调用的事件处理程序不同的元素)的处理程序接收事件。
stopImmediatePropagation
链接已经失效。新链接为 http://www.w3.org/TR/DOM-Level-3-Events/#widl-Event-stopImmediatePropagation。 - Oriol