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 相关文章推荐
JS高级笔记
Jul 13 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
AudioContext 实现音频可视化(web技术分享)
Feb 24 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模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JScript的条件编译
2007/05/29 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python机器学习之KNN分类算法
2018/08/29 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python实现贪吃蛇游戏
2020/03/21 Python
python实现杨氏矩阵查找
2019/03/02 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python批量处理文件或文件夹
2020/07/28 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
竞选班干部演讲稿100字
2014/08/20 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
英语复习计划
2015/01/19 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL