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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
Python中的迭代器漫谈
2015/02/03 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python 提取文件指定列的方法示例
2019/08/07 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
上海期货面试题
2014/01/31 面试题
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
公司新年寄语
2014/04/04 职场文书
入股协议书范本
2014/04/14 职场文书
研究生求职自荐书
2014/06/23 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书