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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
js一组验证函数
Dec 20 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 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堆栈与列队的学习
2013/06/21 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
小程序实现分类页
2019/07/12 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
python实现图片识别汽车功能
2018/11/30 Python
Python读取stdin方法实例
2019/05/24 Python
opencv实现简单人脸识别
2021/02/19 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
安全施工标语
2014/06/07 职场文书
道士塔读书笔记
2015/06/30 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers