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 二维数组的实现与应用
Mar 16 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
4.与数据库的连接
2006/10/09 PHP
PHP与MySQL交互使用详解
2006/10/09 PHP
php session应用实例 登录验证
2009/03/16 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
大型活动组织方案
2014/05/10 职场文书
运动会横幅标语
2014/06/17 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
工作一年自我鉴定
2019/06/20 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL