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函数以及基础写法100多条实用整理
Jan 13 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
深入解析ES6中的promise
Nov 08 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
example2.php
2006/10/09 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
实现vuex原理的示例
2020/10/21 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python 除法保留两位小数点的方法
2018/07/16 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
旷课检讨书范文
2014/10/30 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python