事件委托与阻止冒泡阻止其父元素事件触发
更新时间:2014年09月02日 15:26:51 投稿:whsnow
当点击具体的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被点击"); });
加一句阻止冒泡即可。
相关文章
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习,感兴趣的朋友可以了解下哈2013-05-05BootStrap的table表头固定tbody滚动的实例代码
本文给大家分享一段关于BootStrap的table表头固定tbody滚动的实例代码,代码简单易懂,需要的朋友可以参考下2016-08-08通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
本文为大家介绍下将DIV的滚动条滚动到其子元素所在的位置,方便自动定位,需要的朋友可以参考下2014-05-05jQuery Datatable 多个查询条件自定义提交事件(推荐)
这篇文章主要介绍了jQuery Datatable 多个查询条件自定义提交事件的相关资料,需要的朋友可以参考下2017-08-08JQuery模板插件 jquery.tmpl 动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件。有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据2011-11-11
最新评论