stopPropagation 与 stopImmediatePropagation

原创已于 2022-07-10 21:58:40 修改 · 481 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2022-07-10 14:53:02 首次发布

前端开发专栏收录该内容

42 篇文章

订阅专栏

本文探讨了JavaScript中两个重要的事件处理方法：stopPropagation用于阻止事件冒泡到父元素，而stopImmediatePropagation则进一步阻止当前元素上相同类型事件的后续处理，但不影响其他类型的事件。

文章目录

stopPropagation 阻止冒泡至父元素
stopImmediatePropagation 阻止冒泡至当前元素的剩余的相同类型的事件

示例

    <div id="parent">
      parent
      <div id="son">son</div>
    </div>

    <script>
      var parent = document.getElementById("parent");
      var son = document.getElementById("son");

      parent.addEventListener("click", function (e) {
        console.log("===click parent===");
        e.stopImmediatePropagation();
      });

      son.addEventListener("click", function (e) {
        console.log("===click son（事件1）===");
      });

      son.addEventListener("click", function (e) {
        console.log("===click son（事件2）===");
      });
    </script>

在这里插入图片描述

stopPropagation 阻止冒泡至父元素

      parent.addEventListener("click", function (e) {
        console.log("===click parent===");
        e.stopImmediatePropagation();
      });

      son.addEventListener("click", function (e) {
        console.log("===click son（事件1）===");
        e.stopPropagation();  // 阻止冒泡至父元素
      });

      son.addEventListener("click", function (e) {
        console.log("===click son（事件2）===");
      });

在这里插入图片描述

stopImmediatePropagation 阻止冒泡至当前元素的剩余的相同类型的事件

示例1

      parent.addEventListener("click", function (e) {
        console.log("===click parent===");
        e.stopImmediatePropagation();
      });

      son.addEventListener("click", function (e) {
        console.log("===click son（事件1）===");
        e.stopImmediatePropagation(); // 阻止冒泡至当前元素的剩余的相同类型的事件
      });

      son.addEventListener("click", function (e) {
        console.log("===click son（事件2）===");
      });

在这里插入图片描述

示例2


    son.addEventListener("mouseenter", function (e) {
    console.log("===mouseenter son（事件1）===");
    e.stopImmediatePropagation(); // 阻止冒泡至当前元素的剩余的相同类型的事件
    });

    son.addEventListener("mouseenter", function (e) {
    console.log("===mouseenter son（事件2）===");
    });

    son.addEventListener("click", function (e) {
    console.log("===click son（事件3）===");
    });

    son.addEventListener("click", function (e) {
    console.log("===click son（事件4）===");
    });