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 精粹读书笔记(1,2)
Feb 07 Javascript
javascript json2 使用方法
Mar 16 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
JavaScript模拟push
2016/03/06 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
js实现动态改变radio状态的方法
2018/02/28 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python内存映射文件读写方式
2020/04/24 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python实现视频压缩功能
2020/12/18 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
英语自荐信常用语句
2013/12/13 职场文书
关于工资低的辞职信
2014/01/14 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
施工安全责任书范本
2014/07/24 职场文书
介绍信如何写
2015/01/31 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android