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 相关文章推荐
document节点对象的获取方式示例介绍
Dec 24 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
关于元旦的广播稿
2014/02/16 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
三年级学生评语大全
2014/12/26 职场文书
高中团支书竞选稿
2015/11/21 职场文书
《落花生》教学反思
2016/02/16 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android