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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python 搜索大文件的实例代码
2019/07/08 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python退出循环的方法
2020/06/18 Python
Python 创建TCP服务器的方法
2020/07/28 Python
vscode调试django项目的方法
2020/08/06 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
学生处主任岗位职责
2013/12/01 职场文书
高一自我鉴定
2013/12/17 职场文书
工作评语大全
2014/04/26 职场文书
公司年底活动方案
2014/08/17 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
甜品店创业计划书
2014/09/21 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
检讨书之工作不认真
2019/08/14 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS