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 源码分析笔记(6) jQuery.data
Jun 08 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
详解Vue 的异常处理机制
2020/11/30 Vue.js
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python3中int(整型)的使用教程
2017/03/23 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
商场中秋节活动方案
2014/02/07 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
学校重阳节活动总结
2015/03/24 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS