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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
用js实现的抽象CSS圆角效果!!
May 03 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
关于JavaScript回调函数的深入理解
Jun 27 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抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
js版本A*寻路算法
2006/12/22 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
VC++笔试题
2014/10/13 面试题
付款委托书范本
2014/04/04 职场文书
党日活动总结
2014/05/07 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
悬空寺导游词
2015/02/05 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript