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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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
php中的时间处理
2006/10/09 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php密码生成类实例
2014/09/24 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
毕业设计说明书
2014/05/07 职场文书
抵押贷款承诺书
2014/05/30 职场文书
机关作风建设自查报告
2014/10/22 职场文书
医生见习报告范文
2014/11/03 职场文书
学校中秋节活动总结
2015/03/23 职场文书
债务纠纷起诉书
2015/05/20 职场文书