事件委托與阻止冒泡阻止其父元素事件觸發(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中使用each處理json數(shù)據(jù)
這篇文章主要介紹了jQuery中使用each處理json數(shù)據(jù),非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-04-04jquery 中的each()跳出循環(huán)的語(yǔ)句
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán),在each的回調(diào)函數(shù)中使用return false2014-05-05模擬jQuery中的ready方法及實(shí)現(xiàn)按需加載css,js實(shí)例代碼
這篇文章介紹了模擬jQuery中的ready方法及實(shí)現(xiàn)按需加載css,js實(shí)例代碼,有需要的朋友可以參考一下2013-09-09jQuery實(shí)現(xiàn)開(kāi)關(guān)燈效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)開(kāi)關(guān)燈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08使用BootStrap和Metroui設(shè)計(jì)的metro風(fēng)格微網(wǎng)站或手機(jī)app界面
今天使用bootstrap和metroui設(shè)計(jì)了一個(gè)metro風(fēng)格的移動(dòng)app或者微信微網(wǎng)站的界面,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友可以參考下2016-10-10jquery對(duì)象訪問(wèn)是什么及使用方法介紹
這篇文章主要為大家詳細(xì)介紹了jquery對(duì)象訪問(wèn)是什么及使用方法介紹,感興趣的小伙伴們可以參考一下2016-05-05總結(jié)jQuery插件開(kāi)發(fā)中的一些要點(diǎn)
這篇文章主要介紹了總結(jié)jQuery插件開(kāi)發(fā)中的一些要點(diǎn),包括命名空間與事件events等重點(diǎn)和難點(diǎn)部分的講解,要的朋友可以參考下2016-05-05jQuery移除tr無(wú)效的解決方法(tr是動(dòng)態(tài)添加)
移除掉某些tr(tr是動(dòng)態(tài)添加的)嘗試了很多方法,都不見(jiàn)效,后來(lái)發(fā)現(xiàn)個(gè)不錯(cuò)的方法,于是與大家分享下2014-09-09