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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
javascript生成大小写字母
Jul 03 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
实例讲解PHP表单处理
2019/02/15 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
javascript中attachEvent用法实例分析
2015/05/14 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python重试装饰器示例
2014/02/11 Python
python实现360皮肤按钮控件示例
2014/02/21 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
让Python代码更快运行的5种方法
2015/06/21 Python
python装饰器实例大详解
2017/10/25 Python
Python断言assert的用法代码解析
2018/02/03 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python中字符串与编码示例代码
2019/05/20 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
网络教育自我鉴定
2013/11/01 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android