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 相关文章推荐
window.print打印指定div实例代码
Dec 13 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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许愿墙模块功能分析
2013/06/25 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python语法分析之字符串格式化
2019/06/13 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
大学生军训自我评价分享
2013/11/09 职场文书
求职简历中自我评价
2014/01/28 职场文书
工作说明书范文
2014/05/07 职场文书
机动车交通事故协议书
2015/01/29 职场文书
英镑符号 £
2022/02/17 杂记