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 相关文章推荐
自写的jQuery异步加载数据添加事件
May 15 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
js实现左右轮播图
Jan 09 Javascript
js判断密码强度的方法
Mar 18 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
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
PHP实现分页的一个示例
2006/10/09 PHP
打造计数器DIY三步曲(上)
2006/10/09 PHP
php调用C代码的实现方法
2014/03/11 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python高斯消除矩阵
2019/01/02 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
怎样声明子类
2013/07/02 面试题
销售部主管岗位职责
2013/12/18 职场文书
写给保洁员表扬信
2014/01/08 职场文书
安全教育月活动总结
2014/05/05 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2014司机年终工作总结
2014/12/05 职场文书
宾馆客房管理制度
2015/08/06 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书