dtcms 模板下载 微信小程序实战教程 mAPI cakephp lambda null mono Parsley vue原理 swift视频教程 jquery删除子元素 bootstrap侧边栏 java两个数组合并 多线程实现方式 java遍历json数组 js教程文档 kafka启动命令 matlab读入图片 hbuilder插件 python的open函数 python函数的调用 java教学 java接口类型 java的特性 tt语音官网 奥法隐藏外观 服务器文件共享软件 diskman 一键root软件下载 videoview 冰冠堡垒单刷路线 电脑内录软件 淘宝图片下载器 惠普打印机怎么加粉 cad特性不显示 服务器备份软件 伤害显示宏 ie内核修复 苹果手机怎么删除软件 挂卡
当前位置: 首页 > 学习教程  > 

原生js如何阻止事件冒泡

2020/10/16 18:04:03 文章标签: js原生点击事件

我们只点击了最里面的那个div&#xff0c;但是在他的父级及以上div身上所绑定的事件都被触发了&#xff0c;这显 然不是我们想要的结果&#xff0c;我们实际需求是只想要触发点击的那个div上绑定的事件&#xff0c;我们该如何 阻止浏览器的这种事件处理机制呢&#xff1f; <…

我们只点击了最里面的那个div,但是在他的父级及以上div身上所绑定的事件都被触发了,这显
然不是我们想要的结果,我们实际需求是只想要触发点击的那个div上绑定的事件,我们该如何
阻止浏览器的这种事件处理机制呢?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #info {
      width: 500px;
      height: 500px;
      background: blue;
    }
    .box-1 {
      width: 400px;
      height: 400px;
      background: red;
    }
    .box-2 {
      width: 300px;
      height: 300px;
      background: yellow;
    }
    .box-3 {
      width: 200px;
      height: 200px;
      background: orange;
    }
    .box-4 {
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
</head>
<body>
<div id="info">
  <div class="box-1">
    最外层
    <div class="box-2">
      第二层
      <div class="box-3">
        第三层
        <div class="box-4">最底</div>
      </div>
    </div>
  </div>
</div>
  <script>
    window.onload = function () {
      let info = document.getElementById('info')
      let box1 = document.querySelector('.box-1')
      let box2 = document.querySelector('.box-2')
      let box3 = document.querySelector('.box-3')
      let bubbles = document.querySelector('.box-4')
      
      bubbles.onclick = function (e) {
        var ev = e || window.event;
        if(ev && ev.stopPropagation) {
          //非IE浏览器
          ev.stopPropagation();
        } else {
          //IE浏览器(IE11以下)
          ev.cancelBubble = true;
        }
        console.log("最底层盒子被点击了")
      }
      box3.onclick = function (e) {
        var ev = e || window.event;
        if(ev && ev.stopPropagation) {
          //非IE浏览器
          ev.stopPropagation();
        } else {
          //IE浏览器(IE11以下)
          ev.cancelBubble = true;
        }
        console.log("第三个盒子被点击了")
      }
      box2.onclick = function (e) {
        var ev = e || window.event;
        if(ev && ev.stopPropagation) {
          //非IE浏览器
          ev.stopPropagation();
        } else {
          //IE浏览器(IE11以下)
          ev.cancelBubble = true;
        }
        console.log("第二个盒子被点击了")
      }
      box1.onclick = function (e) {
        var ev = e || window.event;
        if(ev && ev.stopPropagation) {
          //非IE浏览器
          ev.stopPropagation();
        } else {
          //IE浏览器(IE11以下)
          ev.cancelBubble = true;
        }
        console.log("第一个盒子被点击了")
      }
    }
    //以上写法就可以阻止事件的冒泡 每个盒子都只能打印一次 
  </script>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5c9dd1106fb9a05e2a300cf1


本文链接: http://www.dtmao.cc/news_show_300370.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?