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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
深入理解Antd-Select组件的用法
Feb 25 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/04/24 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python中的常量和变量代码详解
2018/07/25 Python
python求最大值最小值方法总结
2019/06/25 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
招商业务员岗位职责
2013/12/16 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
《老山界》教学反思
2014/04/08 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
自我评价优缺点范文
2015/03/11 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Python开发五子棋小游戏
2022/05/02 Python