数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

来源:脚本之家  责任编辑:小易  

本文实例讲述了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页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

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

您可能感兴趣的文章:


  • 本文相关:
  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
  • js阻止冒泡及jquery阻止事件冒泡示例介绍
  • js阻止冒泡和默认事件(默认行为)详解
  • js冒泡、捕获事件及阻止冒泡方法详细总结
  • zepto.js中tap事件阻止冒泡的实现方法
  • js阻止冒泡事件以及默认事件发生的简单方法
  • js利用事件的阻止冒泡实现点击空白模态框的隐藏
  • javascript中捕获/阻止捕获、冒泡/阻止冒泡方法
  • 浅谈javascript事件取消和阻止冒泡
  • js工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
  • 用react-redux实现react组件之间数据共享的方法
  • javascript下ie与ff兼容函数收集
  • 轻松实现javascript数据双向绑定
  • 微信、qq、微博、safari中使用js唤起app
  • javascript缓存api
  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
  • 用javascript实现截取字符串包含中文处理的函数
  • 在javascript中,为什么要尽可能使用局部变量?
  • js 判断代码全收集
  • javascript打印局部页面实例
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved