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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
关于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
YII实现分页的方法
2014/07/09 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python 批量将中文名转换为拼音
2021/02/07 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
老师给学生的表扬信
2014/01/17 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
大学生就业意向书范文
2014/04/01 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Golang jwt身份认证
2022/04/20 Golang
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技