事件委托与阻止冒泡阻止其父元素事件触发
2014-09-02 00:00
489 查看
简单说下事件委托与阻止冒泡
html:
js:
当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的。
解决:
加一句阻止冒泡即可。
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被点击"); });
加一句阻止冒泡即可。
相关文章推荐
- 事件委托与阻止冒泡阻止其父元素事件触发
- 父级元素触发子元素的 click 事件,阻止子元素事件冒泡
- 三、event 和 event.target(目标元素) 和短路运算以及 组织默认行为、阻止冒泡、事件委托
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
- 阻止默认行为:比如a链接的跳转。阻止冒泡:子元素的事件触发到了父元素身上
- 事件委托与阻止冒泡
- 原生JS如何利用冒泡减少事件的触发,只代理给共有的父元素。
- js 阻止元素(文档)默认事件,阻止冒泡事件
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
- 浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
- vue中阻止click事件冒泡,防止触发另一个事件的方法
- DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
- vue中阻止click事件冒泡,防止触发另一个事件
- javascript阻止子元素冒泡触发父元素的mouseover、mouseout
- 事件代理中冒泡带来的问题----触发根元素自己的事件
- JS事件绑定、冒泡/捕获、常见的兼容处理、委托、阻止默认行为和冒泡
- 事件冒泡。阻止事件冒泡 |阻止元素的默认行为
- 阻止点击事件冒泡,不让父级元素的点击事件响应
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
- jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法