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


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下组织javascript代码(js函数化)
Aug 25 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
express express-session的使用小结
Dec 12 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 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 parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
小程序实现搜索框
2020/06/19 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python解析json实例方法
2013/11/19 Python
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python文件选择对话框的操作方法
2019/06/27 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
建筑实习自我鉴定
2013/10/18 职场文书
学生会主席事迹材料
2014/01/28 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
销售会计岗位职责
2014/03/15 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
助理政工师申报材料
2014/06/03 职场文书
博士论文答辩开场白
2015/06/01 职场文书
行政处罚决定书
2015/06/24 职场文书
禁毒主题班会教案
2015/08/14 职场文书
导游词之山东八大关
2019/12/18 职场文书