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