事件委托与阻止冒泡
来源:互联网 发布:java api chm 中文 编辑:程序博客网 时间:2024/05/18 01:52
简单说下事件委托与阻止冒泡
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被点击");});
更多讲解与优秀文章:http://www.ituring.com.cn/article/467#
0 1
- 事件委托与阻止冒泡
- 事件冒泡与阻止
- js 事件委托 阻止事件冒泡---
- 事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为
- JQ阻止默认事件与阻止冒泡
- JS 阻止冒泡与阻止默认事件
- 事件冒泡与事件委托
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- js阻止默认事件与js阻止事件冒泡示例
- 事件委托、事件触发与事件冒泡
- 事件冒泡、事件捕获与事件委托
- jquery与js阻止事件冒泡
- vuejs-阻止事件冒泡与默认行为
- vuejs-阻止事件冒泡与默认行为
- vuejs-阻止事件冒泡与默认行为
- 绑定事件的冒泡与阻止冒泡事件的发生
- DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
- 事件冒泡与捕获&事件委托
- 一杯姜水防治八种病
- poj-1691
- 开源中国IOS客户端学习
- 变量存储类型、作用域
- OC学习笔记——内存管理
- 事件委托与阻止冒泡
- 直接操作 SDL_Overlay 上的像素
- Merge Two Sorted Lists
- 李鹏飞
- 关于两个变量不使用临时变量进行值交换
- Seam文件(图片)上传及相关学习记录
- spring MVC原理
- setuid()与seteuid()的区别
- WLAN一些术语和基本概念