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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python实现的简单猜数字游戏
2015/04/04 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
小学防溺水制度
2014/01/29 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
汽车维修求职信
2014/06/15 职场文书
2014年租房协议书范本
2014/10/30 职场文书