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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
使用JS实现简易计算器
Jun 14 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python中正则表达式的使用方法
2018/02/25 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python处理document文档保留原样式
2019/09/23 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
如何理解python面向对象编程
2020/06/01 Python
python中round函数如何使用
2020/06/19 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
生产车间主任的个人自我鉴定
2013/10/25 职场文书
建筑学推荐信
2013/11/03 职场文书
设计师个人求职信范文
2014/02/02 职场文书
校园环保建议书
2014/05/14 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
婚礼父母致辞
2015/07/28 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技