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 使用 NodeList需要注意的问题
Mar 04 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
应届毕业生个人自我评价
2013/09/20 职场文书
酒店管理自荐信
2013/10/23 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
入党积极分子个人总结
2015/03/02 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript