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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
远离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整合PayPal支付
2015/06/11 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python缩进区别分析
2014/02/15 Python
pyqt4教程之widget使用示例分享
2014/03/07 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python中if嵌套命令实例讲解
2021/02/25 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
办公室内勤工作职责
2013/12/11 职场文书
水电站项目建议书
2014/05/12 职场文书
师范生求职自荐信
2014/06/14 职场文书
购房委托书
2014/10/15 职场文书
刑事和解协议书范本
2014/11/19 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
Linux中文件的基本属性介绍
2022/06/01 Servers