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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
微信小程序实现人脸识别
May 25 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
vue中的inject学习教程
Apr 24 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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文本转图片自动换行的方法
2013/03/13 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
浅谈编码,解码,乱码的问题
2016/12/30 Python
python 获取字符串MD5值方法
2018/05/29 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
校园十大歌手策划书
2014/02/01 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
法学自荐信
2014/06/20 职场文书
2014年班组工作总结
2014/11/20 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL