JavaScript阻止事件冒泡的方法


Posted in Javascript onDecember 06, 2021

我们需要注意的是:事件冒泡本身的特性,会带来的坏处,也会带来的好处,在后续的博客我会详细说明。

  • 所以我们在这里将论述一下如何阻止事件冒泡。
  • 比如现在有一个子盒子和一个父盒子,子盒子和父盒子二者都有点击事件,但是此时,当我们点击子盒子时,只想让子盒子显示点击事件。这里我们就要用到阻止事件冒泡的方法来隔断父盒子的事件显示。

先创建两个盒子,并给他们添加点击事件,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            margin: 100px auto;
            width: 100px;
            height:100px;
            overflow: hidden;
            background-color: palegreen;
        }
        .son{
            width: 50px;
            height: 50px;
            margin-left: 25px;
            margin-top: 25px;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
       son.addEventListener('click',function(){
            alert('son');
        },false)
        father.addEventListener('click',function(){
            alert('father');
        },false)
    </script>
</body>
</html>

当我们点击子盒子的点击事件时,打印结果为:

JavaScript阻止事件冒泡的方法

我们应该怎样阻断父盒子的点击事件呢?

可以直接在子盒子内部的点击事件里面添加stopPropagation()方法,

如下所示:

son.addEventListener('click',function(e){
            alert('son');
            e.stopPropagation();
        },false)

此时,运行结果为:

JavaScript阻止事件冒泡的方法

阻断成功。

但是需要注意的是:这个方法也有兼容性问题,在低版本浏览器中(IE 6-8 )通常是利用事件对象cancelBubble属性来操作的。即直接在相应的点击事件里面添加:

e.cancelBubble = true;

 如果我们想要解决这种兼容性问题,就可以采用下述方法:

if(e && e.stopPropagation){
      e.stopPropagation();
  }else{
      window.event.cancelBubble = true;
  }

到此这篇关于基于JavaScript阻止事件冒泡的文章就介绍到这了,更多相关JavaScript阻止事件冒泡内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
JavaScript执行机制详细介绍
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
JavaScript 与 TypeScript之间的联系
JavaScript利用html5新方法操作元素类名详解
Nov 27 #Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 #Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 #Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 #Javascript
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
详解Python中的分支和循环结构
2020/02/11 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
优秀幼教自荐信
2014/02/03 职场文书
个人授权委托书范本
2014/09/14 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers