【前端每日基础】day11——事件冒泡

最新推荐文章于 2024-07-19 12:58:53 发布

modaoshi51991

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量305

点赞数 7

分类专栏：前端每日基础文章标签：前端

本文链接：https://blog.csdn.net/modaoshi51991/article/details/139012927

版权

前端每日基础专栏收录该内容

45 篇文章 1 订阅

订阅专栏

阻止事件冒泡

事件冒泡是指当一个事件发生在某个元素上时，该事件会沿着DOM树向上传播到祖先元素。如果不希望事件传播到祖先元素，可以使用以下方法来阻止事件冒泡：

使用 stopPropagation()
stopPropagation() 方法可以阻止事件向上传播到祖先元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stop Propagation</title>
</head>
<body>
  <div id="parent" style="padding: 50px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Child
    </div>
  </div>

  <script>
    const parent = document.getElementById('parent');
    const child = document.getElementById('child');

    parent.addEventListener('click', () => {
      alert('Parent clicked');
    });

    child.addEventListener('click', (event) => {
      alert('Child clicked');
      event.stopPropagation(); // 阻止事件冒泡
    });
  </script>
</body>
</html>

在上述代码中，点击子元素时，只会触发子元素的点击事件，不会触发父元素的点击事件，因为事件冒泡被阻止了。

modaoshi51991

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【前端每日基础】day11——事件冒泡

事件冒泡是指当一个事件发生在某个元素上时，该事件会沿着DOM树向上传播到祖先元素。在上述代码中，点击子元素时，只会触发子元素的点击事件，不会触发父元素的点击事件，因为事件冒泡被阻止了。stopPropagation() 方法可以阻止事件向上传播到祖先元素。使用 stopPropagation()
复制链接

扫一扫