Event
接口的 stopImmediatePropagation()
方法阻止监听同一事件的其他事件监听器被调用。
如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation()
,那么剩下的事件监听器都不会被调用。
译者注:注意与 event.stopPropagation()
之间的区别
语法
event.stopImmediatePropagation();
例子
<!DOCTYPE html> <html> <head> <style> p { height: 30px; width: 150px; background-color: #ccf; } div {height: 30px; width: 150px; background-color: #cfc; } </style> </head> <body> <div> <p>paragraph</p> </div> <script> const p = document.querySelector('p') p.addEventListener("click", (event) => { alert("我是p元素上被绑定的第一个监听函数"); }, false); p.addEventListener("click", (event) => { alert("我是p元素上被绑定的第二个监听函数"); event.stopImmediatePropagation(); // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行. }, false); p.addEventListener("click",(event) => { alert("我是p元素上被绑定的第三个监听函数"); // 该监听函数排在上个函数后面,该函数不会被执行 }, false); document.querySelector("div").addEventListener("click", (event) => { alert("我是div元素,我是p元素的上层元素"); // p元素的click事件没有向上冒泡,该函数不会被执行 }, false); </script> </body> </html>
规范
规范 | 状态 | 备注 |
---|---|---|
DOM Event.stopImmediatePropagation() |
Living Standard |
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.