事件委托与阻止冒泡阻止其父元素事件触发


Posted in Javascript onSeptember 02, 2014

简单说下事件委托与阻止冒泡

html:

<ul class="clearfix" data-type="cityPick"> 
<li class="active_sort_opts" data-id="0">全部</li> 
<li data-id="88">纽约</li> 
<li data-id="119">洛杉矶</li> 
<li data-id="138">拉斯维加斯</li> 
<li data-id="84">夏威夷</li> 
<li data-id="120">旧金山</li> 
<li data-id="105">奥兰多</li> 
<li data-id="118">西雅图</li> 
</ul>

js:

$("ul[data-type='cityPick']").on('click',function(){ 
alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(){ 
alert("子元素li被点击"); 
});

当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的。

解决:

$("ul[data-type='cityPick']").on('click',function(){ 
alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(e){ 
e.stopPropagation();//阻止冒泡 
alert("子元素li被点击"); 
});

加一句阻止冒泡即可。

Javascript 相关文章推荐
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
javascript的push使用指南
Dec 05 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
解决jquery版本冲突的有效方法
Sep 02 #Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 #Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 #Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 #Javascript
理解javascript中的回调函数(callback)
Sep 02 #Javascript
详解js闭包
Sep 02 #Javascript
jquery delay()介绍及使用指南
Sep 02 #Javascript
You might like
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php HTML无刷新提交表单
2016/04/05 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python实现Restful API的例子
2019/08/31 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
家庭贫困证明书(3篇)
2014/09/15 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
三年级学生期末评语
2014/12/26 职场文书
大学生自我评价范文
2015/03/03 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
诚信高考倡议书
2019/06/24 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js