JavaScript捕捉事件和阻止冒泡事件实例分析


Posted in Javascript onAugust 03, 2018

本文实例讲述了JavaScript捕捉事件和阻止冒泡事件。分享给大家供大家参考,具体如下:

今日,项目程序出现异常,后发现跟冒泡事件有关,利用此机会探索一下利用Javascript捕获和冒泡事件。

一、要探究捕获和冒泡事件,首先要知道什么是事件的捕获和冒泡,所以呢,先从概念入手;

事件的冒泡:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

其实事件冒泡是一个从后代节点向祖先节点冒泡的过程,而捕获是从祖先节点到后节点的过程。

我为了方便理解,则用先捕获,后冒泡,捕获从上到下,冒泡从下到上来记忆。我记得从哪儿看到的,有人把捕获比喻为石头沉入海底,而把冒泡比喻为气泡冒出水面。当然了,捕获的深度取决于你的DOM布局,海底就有点深了哈,^_^

注意:IE6、IE7、IE8只支持冒泡流,不支持捕获流。

二、为什么要阻止冒泡事件

也许会有人问:为什么要阻止冒泡事件呢?阻止冒泡事件有什么用处呢?

下面我们就来说下为什么要阻止冒泡事件:

先举个例子吧,如下代码:

<html>
  <div id='div_1' onclick="alert('I'm First!')">
     <div id='div_2' onclick="alert('I'm Second!')">
         <a id="alink" onclick="alert('I'm Third!')" href="http://www.baidu.com" rel="external nofollow" >Click Here</a>
     </div>
  </div>
</html>

从上面的代码可以看出,div_1是div_2的容器,而div_2是a的容器,总共三层。

我们运行这个实例,点击Click Here会发现,分别弹出了三个alert提示框,而且顺序为I'm Third!I'm Second!I'm First!,这就符合我们上面提到的冒泡的概念了。

而我这次碰到的问题就是这样,我称之为“事件重叠”。

出现这种情况,肯定不行,所以我们要阻止该事件冒泡的发生,那如何来阻止呢?下面将。

三、阻止事件冒泡的方法

首先我先给出一个纯JavaScript版的写法:

function aOnClick(e){
   window.event? window.event.cancelBubble = true : e.stopPropagation();
}

解释:因为IE里的阻止冒泡的写法为window.event.cancelBubble = true,其他浏览器为e.stopPropagation();所以这里做了兼容。

再给出一个jQuery版本的写法:

$(function() {
  $("#alink").click(function(event) {
    event.stopPropagation();
  });
});

四、阻止冒泡的其他方法及不同

我就是用上面的函数阻止了冒泡,但是还有其他的方法可以达到类似的效果,但还是有所不同;

$("#alink").click(function(event) {
  return false;
});

解释:上面方法使用jQuery对alink进行了操作,经过测试,得出结论,该函数阻止了冒泡,但是它将a的默认行为也屏蔽掉了(此处为href属性)。这就是不同之处。

顺便说下,javasccript的阻止默认行为的方法

event.preventDefault();

从上面可以看出,return false;event.stopPropagation();PreventDefault()的并集。

就到这里吧!

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
canvas 实现中国象棋
Feb 17 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 #Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 #Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 #Javascript
小程序tab页无法传递参数的方法
Aug 03 #Javascript
详解Webpack多环境代码打包的方法
Aug 03 #Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
浅析Vue 和微信小程序的区别、比较
Aug 03 #Javascript
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php中explode函数用法分析
2014/11/15 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
毕业自荐书
2013/12/09 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
高中家长寄语
2014/04/02 职场文书
大学生村官演讲稿
2014/04/25 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
2014年信访工作总结
2014/11/17 职场文书
质量保证书格式
2015/02/27 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Python获取字典中某个key的value
2022/04/13 Python