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 相关文章推荐
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
js 数据类型判断的方法
Dec 03 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python实现决策树
2017/12/21 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
生物技术研究生自荐信
2013/11/12 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
会计学自荐信
2014/06/03 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
孔庙导游词
2015/02/04 职场文书
爱国影片观后感
2015/06/18 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python