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时区函数介绍
Sep 14 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 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抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
浅析python标准库中的glob
2020/03/13 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
毕业生求职推荐信
2013/11/04 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
销售员态度差检讨书
2014/10/26 职场文书
自主招生自荐信格式
2015/03/04 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
2016七夕情人节感言
2015/12/09 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis