事件委托與阻止冒泡阻止其父元素事件觸發(fā)
更新時間：2014年09月02日 15:26:51 投稿：whsnow
當(dāng)點擊具體的li元素時，發(fā)現(xiàn)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被點擊");
});
當(dāng)點擊具體的li元素時，發(fā)現(xiàn)ul的事件也被觸發(fā)了，這是我們不想看到的。
解決：
$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被點擊");
});
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//阻止冒泡
alert("子元素li被點擊");
});
加一句阻止冒泡即可。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)徑向動畫菜單效果的相關(guān)資料,需要的朋友可以參考下2015-07-07
JQuery頁面的表格數(shù)據(jù)的增加與分頁的實現(xiàn)
使用JQuery實現(xiàn)頁面的表格數(shù)據(jù)的增加與分頁，具體示例如下，喜歡的朋友可以參考下2013-12-12
下面小編就為大家?guī)硪黄猨Query獲取同級元素的簡單代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
基于jquery的時間段實現(xiàn)代碼，需要的朋友可以參考下2012-08-08
本篇文章主要是對jquery事件重復(fù)綁定的快速解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jQuery Ajax使用FormData上傳文件和其他數(shù)據(jù)后端web.py獲取
這篇文章主要介紹了jQuery Ajax使用FormData上傳文件和其他數(shù)據(jù)后端web.py獲取 ,需要的朋友可以參考下2017-06-06
下面的代碼是所有它自己的自定義事件觸發(fā)。你可以綁定到這個自定義事件，并提高它時，你要執(zhí)行的代碼里面綁定。2013-08-08
jQuery是繼prototype之后又一個優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。2009-10-10
jQuery中將函數(shù)賦值給變量的調(diào)用方法
當(dāng)函數(shù)作為其他函數(shù)的參數(shù)時和獨立調(diào)用時，寫法是有區(qū)別的，前者不用附加（），而后者必須加（）2012-03-03
詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹
這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價值，有興趣的可以了解一下。2017-01-01