JS中如何阻止事件的传播

一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。这种三阶段的传播模型，使得同一个事件会在多个节点上触发。

第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click', function (event) {
    
    
  event.stopPropagation();
}, true);

// 事件冒泡到 p 元素后，就不再向上冒泡了
p.addEventListener('click', function (event) {
    
    
  event.stopPropagation();
}, false);

案例：
（1）不阻止事件传播的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>32.事件监听</title>
  <style>
    div{
     
     
      width: 300px;
      height: 200px;
      border: 1px solid red;
    }

    p{
     
     
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
<div id="div1">
  hello
  <p id="p1">world</p>
</div>

</body>

<script>
  let div1 = document.getElementById('div1');
  let p1 = document.getElementById('p1');
  
  div1.addEventListener('click',function () {
     
     
    console.log('div1');
  });
  p1.addEventListener('click',function (event) {
     
     
    console.log(1);
  });
  p1.addEventListener('click',function () {
     
     
    console.log(2);
  });
  p1.addEventListener('click',function () {
     
     
    console.log(3);
  });
</script>
</html>

在这里插入图片描述
（2）使用stopPropagation阻止事件传播，可以看出外层的div绑定的click事件没有触发。

p1.addEventListener('click',function (event) {
    
    
  // 只能阻止这个事件的传播，但是不能取消事件，后边绑定的click监听函数可以正常触发
  event.stopPropagation();
  console.log(1);
});

在这里插入图片描述
stopPropagation方法只会阻止事件的传播，不会阻止该事件触发<p>节点的其他click事件的监听函数，也就是说后边绑定的click监听函数可以正常触发。

（3）使用stopImmediatePropagation
如果想要彻底取消该事件，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。

stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比stopPropagation()更彻底。

如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了stopImmediatePropagation方法，其他的监听函数就不会再执行了。

p1.addEventListener('click',function (event) {
    
    
  // 使得后面绑定的所有click监听函数都不再触发，但是当前的还是可以正常触发
  event.stopImmediatePropagation();
  console.log(1);
});

在这里插入图片描述

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入

JS中如何阻止事件的传播

猜你喜欢