js 冒泡事件

javascript 专栏收录该内容
16 篇文章 0 订阅

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

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

冒泡事件:事件从事件目标(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啦,是不是很简单!

更多补充,敬请期待

  • 3
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值