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 相关文章推荐
jquery动画1.加载指示器
Aug 24 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
js实现滚动条自动滚动
Dec 13 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环境搭建最新方法
2006/09/05 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php导出excel格式数据问题
2014/03/11 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
浅谈php冒泡排序
2014/12/30 PHP
javascript 写类方式之四
2009/07/05 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Python pip配置国内源的方法
2020/02/14 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
小学后勤管理制度
2014/01/14 职场文书
司机检讨书
2014/02/13 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL