js 冒泡事件

最新推荐文章于 2025-07-04 16:59:10 发布

我不是一个假前端

最新推荐文章于 2025-07-04 16:59:10 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：冒泡事件点击子类事件父级事件不执行 js

本文链接：https://blog.youkuaiyun.com/qq_36208461/article/details/81258240

javascript 专栏收录该内容

16 篇文章

订阅专栏

冒泡事件相信很多人多听过，但是具体什么是冒泡事件，有些人估计还是不太清楚！

我在这里简单的说明一下：

冒泡事件：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

来个例子吧，这样清晰一点：

<div class="div1" onclick="fun1();">
  <div class="div2" onclick="fun2();">
    <div class="div3" onclick="fun3();">div3</div>div2
  </div>div1
</div>

首先写一个html 文件；
样式吗，我就随便谢谢啦，这里也贴出来


  .div1{width: 300px;height: 300px;background: #f0ad4e;}
  .div2{width: 200px;height: 200px;background: #00deff;}
  .div3{width: 100px;height: 100px;background: #9B410E;}

得到的样式就是这样：

这里写图片描述

然后对应的js就是：

  function fun1() {
      console.log("div1")
  }
  function fun2() {
      console.log("div2")
  }
  function fun3() {
      console.log("div3")
  }

这里我们希望，点击div3。就会打印div3,点击div2。就会打印div2,点击div1。就会打印div1.

但是，我们点击div3时会出现：
这里写图片描述

他会执行fun1,fun2,fun3三个方法；
但是我们希望他只执行fun3,

这里我们就要阻止冒泡事件，
阻止冒泡事件只需

<div class="div3" onclick="fun3(event);">div3</div>div2

  function fun3(e) {
      console.log("div3")
      e.stopPropagation(); // 用这个
  }

就可以啦，这是点击div3，就只会打印div3啦，是不是很简单！

更多补充，敬请期待