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 ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python 产生token及token验证的方法
2018/12/26 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python序列类型的打包和解包实例
2019/12/21 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
大整数数相乘的问题
2012/07/22 面试题
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
80后职场人的职业生涯规划
2014/03/08 职场文书
公司投资建议书
2014/05/16 职场文书
廉洁自律证明
2015/06/24 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android