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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
JS上传前预览图片实例
Mar 25 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
Vue 打包后相对路径的引用问题
Jun 05 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
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
短信提示使用 特效
2007/01/19 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python删除特定文件的方法
2015/07/30 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python numpy格式化打印的实例
2018/05/14 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
高二政治教学反思
2014/02/01 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2014年质量工作总结
2014/11/22 职场文书
创业计划书之面包店
2019/09/12 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
java中如何截取字符串最后一位
2022/07/07 Java/Android