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 相关文章推荐
js获取html文件的思路及示例
Sep 17 Javascript
javascript打印输出json实例
Nov 11 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
react 生命周期实例分析
May 18 Javascript
js数组的基本使用总结
Jan 18 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
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Python实现的科学计算器功能示例
2017/08/04 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python中np是做什么的
2020/07/21 Python
python如何运行js语句
2020/09/09 Python
Django URL参数Template反向解析
2020/11/24 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
文体活动总结范文
2014/05/05 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
初三化学教学反思
2016/02/22 职场文书