Js冒泡事件详解及阻止示例


Posted in Javascript onMarch 21, 2014

Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数。
如下例所示:

<html> 
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script> 
function ialertdouble(e) { 
alert('innerdouble'); 
stopBubble(e); 
} function ialertthree(e) { 
alert('innerthree'); 
stopBubbleDouble(e); 
} 
function stopBubble(e) { 
var evt = e||window.event; 
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 
} 
function stopBubbleDouble(e) { 
var evt = e||window.event; 
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 
evt.preventDefault();//阻止浏览器默认行为,这样链接就不会跳转 
} 
$(function() { 
//方法一 
//$('#jquerytest').click(function(event) { 
// alert('innerfour'); 
// event.stopPropagation(); 
// event.preventDefault(); 
//}); 
//方法二 
$('#jquerytest').click(function() { 
alert('innerfour'); 
return false; 
}); 
}); 
</script> 
<div onclick="alert('without');">without 
<div onclick="alert('middle');">middle 
<div onclick="alert('inner');">inner</div> 
<div onclick="ialertdouble(event)">innerdouble</div> 
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p> 
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p> 
</div> 
</div> 
</html>

当你点击inner的时候,会依次弹出‘inner',‘middle'和‘without'。这就是事件冒泡。

从直观上来看,也是这样的,因为最里层的区域是在父级节点中的,点击了子级节点的区域,其实也是点击了父级节点的区域,所以事件会传播起来。

其实,很多的时候,我们并不想事件冒泡,因为这样会同时触发几个事件。

接下来:我们点击innerdouble。就会发现她并没有冒泡,因为她在调用的方法ialertdouble()中调用了stopBubble()方法,方法通过判断浏览器类型(Ie通过cancleBubble() 、firefox通过stopProgation())来阻止冒泡。

但如果是链接的话,我们会发现她也会阻止冒泡,但是会跳转,这就是浏览器的默认行为。需要借助preventDefault()方法来阻止。具体可以查看ialertthree()。

目前主流的都是借助jquery来绑定click事件的,这样的话,就简单多了。

我们可以在点击事件时传入参数event,然后直接

event.stopPropagation();
event.preventDefault(); //没有链接不需要加这个。

这样就可以了。

框架就是好,其实还有更简单的,在事件处理程序中返回false,这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。
【详细代码见上面,记得载入jquery.js。】

其实也还可以在每个click事件中加入判断:

$('#id').click(function(event){ 
if(event.target==this){ 
//do something 
} 
})

解析:事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,所以可以编写以上代码。

不过推荐使用return false,Jquery绑定事件的话。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 #Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 #Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 #Javascript
将中国标准时间转换成标准格式的代码
Mar 20 #Javascript
如何将php数组或者对象传递给javascript
Mar 20 #Javascript
js 触发select onchange事件代码
Mar 20 #Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 #Javascript
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
Stop SQL Server
2007/06/21 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
JS打印组合功能
2016/08/04 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
Python3遍历目录树实现方法
2015/05/22 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
python中的协程深入理解
2019/06/10 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
详解Python模块化编程与装饰器
2021/01/16 Python
Python 图片处理库exifread详解
2021/02/25 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
厂长助理岗位职责
2013/12/27 职场文书
教学实验楼管理制度
2014/02/01 职场文书
客服部工作职责范本
2014/02/14 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
python单元测试之pytest的使用
2021/06/07 Python