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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
Javascript高级技巧分享
Feb 25 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
html中select语句读取mysql表中内容
2006/10/09 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python获取从命令行输入数字的方法
2015/04/29 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python函数中的可变长参数详解
2019/09/12 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
大学四年职业生涯规划书范文
2014/01/02 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
自我检讨书怎么写
2015/05/07 职场文书
通讯稿范文
2015/07/22 职场文书
会议室管理制度范本
2015/08/06 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python