您正位于 MDN Web 文档的可编辑版本

以 MDN Web 文档用户身份查看: https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
stopImmediatePropagationChrome Full support 6Edge Full support 12Firefox Full support 10IE Full support 9Opera Full support 15Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 14Safari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

文档标签和贡献者

标签: 
最后编辑者: BobGreen,