jQuery 方法阻止了其余事件处理程序的执行?

阻止事件冒泡并且阻止相同事件的其他侦听器被调用。

语法节
event.stopImmediatePropagation();

备注节
如果有多个相同类型事件的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法,则当前元素剩下的监听函数将不会被执行。(译者注:注意区别 event.stopPropagation )

<!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>
https://developer.mozilla.org...

相关推荐