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 学习笔记 选择器之三
Jul 23 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JavaScript设计模式之单例模式简单实例教程
Jul 02 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php使用curl存储cookie的示例
2014/03/31 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript天然的迭代器
2010/10/29 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
pycharm实现猜数游戏
2020/12/07 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
八年级物理教学反思
2014/01/19 职场文书
党支部三会一课计划
2014/09/24 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电