事件委托與阻止冒泡阻止其父元素事件觸發(fā)
更新時間:2014年09月02日 15:26:51 投稿:whsnow
當點擊具體的li元素時,發(fā)現ul的事件也被觸發(fā)了,這是我們不想看到的,解決方法就是加一句阻止冒泡即可
簡單說下事件委托與阻止冒泡
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元素時,發(fā)現ul的事件也被觸發(fā)了,這是我們不想看到的。
解決:
$("ul[data-type='cityPick']").on('click',function(){ alert("父元素ul被點擊"); }); $("ul[data-type='cityPick']").on('click','li',function(e){ e.stopPropagation();//阻止冒泡 alert("子元素li被點擊"); });
加一句阻止冒泡即可。
相關文章
模擬jQuery中的ready方法及實現按需加載css,js實例代碼
這篇文章介紹了模擬jQuery中的ready方法及實現按需加載css,js實例代碼,有需要的朋友可以參考一下2013-09-09使用BootStrap和Metroui設計的metro風格微網站或手機app界面
今天使用bootstrap和metroui設計了一個metro風格的移動app或者微信微網站的界面,非常不錯具有參考借鑒價值,感興趣的朋友可以參考下2016-10-10jQuery移除tr無效的解決方法(tr是動態(tài)添加)
移除掉某些tr(tr是動態(tài)添加的)嘗試了很多方法,都不見效,后來發(fā)現個不錯的方法,于是與大家分享下2014-09-09