js阻止冒泡及jquery阻止事件冒泡示例介绍


Posted in Javascript onNovember 19, 2013

js阻止冒泡
在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。

function stopPro(evt){ 
var e = evt || window.event; 
//returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle, 
//可以取消发生事件的源元素的默认动作。 
//window.event?e.returnValue = false:e.preventDefault(); 
window.event?e.cancelBubble=true:e.stopPropagation(); 
}

或者:
function cancelBubble(e) { 
var evt = e ? e : window.event; 
if (evt.stopPropagation) { 
//W3C 
evt.stopPropagation(); 
} 
else { 
//IE 
evt.cancelBubble = true; 
}
 
JQuery 提供了两种方式来阻止事件冒泡。
方式一:event.stopPropagation();
$("#div1").mousedown(function(event){ 
event.stopPropagation(); 
});

方式二:return false;
$("#div1").mousedown(function(event){ 
return false; 
});

Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。
例如:
$("a").click(function(event){ 
event.preventDefault(); //阻止默认动作即该链接不会跳转。 
alert(4);//但是这个还会弹出 
event.stopPropagation();//阻止冒泡事件,上级的单击事件不会被调用 
return false;//不仅阻止了事件往上冒泡,而且阻止了事件本身 
});

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
场景应用:Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
Jquery案例:
<script src="js/jquery-1.4.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#aa").click(function(event){ 
alert("aa"); 
event.preventDefault(); 
event.stopPropagation(); 
alert(3); 
}); 
$("#ee").click(function(){ 
alert("ee"); 
}); 
$("a").click(function(event){ 
event.preventDefault(); 
alert(4); 
event.stopPropagation(); 
return false; 
}); 
}); 
</script> 
</head> 
<body> 
<div id="ee"> 
aaaaaaa 
<input id="aa" type="button" value="test" /> 
<a href="http://baidu.com">baidu.com</a> 
</div> 
</body>

js案例:
function tt(){ 
alert("div"); 
} 
function ttt(){ 
var e = arguments.callee.caller.arguments[0] || window.event; 
window.event?e.returnValue = false:e.preventDefault(); 
alert(3); 
window.event?e.cancelBubble:e.stopPropagation(); 
alert(4); 
} 
</script> 
</head> 
<body> 
<div onclick = "tt();"> 
ccccc 
<a href="http://baidu.com" onclick="ttt();">baidu.com</a> 
</div>
Javascript 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 #Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 #Javascript
jQuery控制iFrame(实例代码)
Nov 19 #Javascript
jquery 检测元素是否存在的实例代码
Nov 19 #Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 #Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 #Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 #Javascript
You might like
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JavaScript 乱码问题
2009/08/06 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python中分数的相关使用教程
2015/03/30 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
如何基于python实现不邻接植花
2020/05/01 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
MySQL数据迁移相关总结
2021/04/29 MySQL
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫