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面向对象 掌握创建对象的9种方式
Jan 04 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
Vue 自适应高度表格的实现方法
May 13 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中逗号与点号的区别
2013/08/05 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
.net C#面试题
2012/08/28 面试题
领导检查欢迎词
2014/01/14 职场文书
法律进社区实施方案
2014/03/21 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
英语教师个人工作总结
2015/02/09 职场文书
少年犯观后感
2015/06/11 职场文书
小学运动会宣传稿
2015/07/23 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript