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(一)jquery选择符 必备知识点
Nov 25 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
理解javascript模块化
Mar 28 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
详解JavaScript执行模型
Nov 16 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利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
详解jQuery选择器
2016/12/21 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
pyspark 随机森林的实现
2020/04/24 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
班组长安全生产职责
2013/12/16 职场文书
学生会主席事迹材料
2014/01/28 职场文书
文艺晚会主持词
2014/03/24 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
捐助感谢信
2015/01/22 职场文书
护理专业自荐信范文
2015/03/06 职场文书
简短清晨问候语
2015/11/10 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python