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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
javascript常用的设计模式
Feb 09 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 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/03/03 日漫
php的一个登录的类 [推荐]
2007/03/16 PHP
php实现求相对时间函数
2015/06/15 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
PHP守护进程实例
2015/03/06 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
node.js的事件机制
2017/02/08 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Python编码爬坑指南(必看)
2016/06/10 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
利用python计算时间差(返回天数)
2019/09/07 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
专科应届生求职信
2013/11/24 职场文书
师德师风承诺书
2014/05/23 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL