Jquery阻止事件冒泡 event.stopPropagation


Posted in Javascript onDecember 11, 2011

描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。

version added: 1.0
event.stopPropagation()
我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。

这个方法对 trigger() 来自定义的事件同样有效。

注意,这不会阻止同一个元素上的其它事件处理函数的运行。

Additional Notes:
自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;元素上的事件将在被委托事件被调用的时候执行。
Example:
灭掉click事件的冒泡。

$("p").click(function(event){ 
event.stopPropagation(); 
// do something 
});

东西并不难,主要是记录下其中的阻止事件冒泡。

因为div添加了单击事件,div内部的img也添加了单击事件,所以当单击img时会先触发img上的单击事件,再触发div上的单击事件,这就是事件冒泡。

在Jquery中我们可以很方便的阻止他。

如下

event.stopPropagation();

这样一来单击img就不再触发div的单击事件啦

$('div').click(function(){ 
var $div = $(this); 
if($div.find('img').size() > 0){ 
return; 
}else{ 
$div.css('backgroundColor','#e1f0f3'); 
$('<img src="https://3water.com/lovejjhao/341157/o_cha.jpg"/>'). 
appendTo($(this)).click(function(event){ 
$div.css('backgroundColor','#ffffff'); 
$(this).remove(); 
event.stopPropagation(); 
}).css('margin-left','10px'); 
} 
});
Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
javascript 数组排序函数
Aug 20 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 #Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 #Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 #Javascript
一个简单的js树形菜单
Dec 09 #Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 #Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 #Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 #Javascript
You might like
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python PyQt5整理介绍
2020/04/01 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
百度吧主申请感言
2014/01/12 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
活动倡议书范文
2014/05/13 职场文书
技术比武方案
2014/05/19 职场文书
住房抵押登记委托书
2014/09/27 职场文书
金陵十三钗观后感
2015/06/04 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
关于环保的广播稿
2015/12/17 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS