快捷導(dǎo)航

jQuery實(shí)現(xiàn)點(diǎn)擊某個(gè)div打開層，點(diǎn)擊其他div關(guān)閉層實(shí)例分析(阻止冒泡)

更新時(shí)間：2016年11月18日 11:24:24 作者：栁羅風(fēng)塵

這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊某個(gè)div打開層，點(diǎn)擊其他div關(guān)閉層的方法,結(jié)合實(shí)例形式分析了jQuery兩種阻止冒泡實(shí)現(xiàn)彈出層的處理技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)點(diǎn)擊某個(gè)div打開層，點(diǎn)擊其他div關(guān)閉層的方法。分享給大家供大家參考，具體如下：

其實(shí)很早就學(xué)過js一些高級(jí)部分的知識(shí)，但是用的不多，也就慢慢淡忘了。最近發(fā)現(xiàn)隨著編程的深入，你不得不用到它們，比如事件的冒泡。

有一需求如下：

①點(diǎn)擊class = "click" 塊彈出 class="pop" 塊
②點(diǎn)擊class = "page" 塊關(guān)閉 class="pop" 塊
③點(diǎn)擊class = "pop" 塊不關(guān)閉任何塊

如果用jQuery 魯莽一點(diǎn)，直接的程序就寫出來了

<script>
 $(function(){
   $('.click').click(functon(){
     $('.pop').show();
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
 })
</script>

你這么一鬧騰，問題就出來了，當(dāng)我點(diǎn)擊"click"塊的時(shí)候，妹的，我還沒看到彈出層 "pop",瞬間就關(guān)閉了，這是為什么呢？因?yàn)槟泓c(diǎn)擊"click" 的瞬間，觸發(fā)了兩個(gè)事件，第一個(gè)是自己本身的點(diǎn)擊事件，因?yàn)樽约旱母笇右沧粤它c(diǎn)擊事件，那第二個(gè)父層的點(diǎn)擊事件也被觸發(fā)了，即所謂的事件冒泡。

我又想保留這兩個(gè)事件，但又不想出現(xiàn)這樣的情況，怎么辦，這就是我要說的阻止事件冒泡。

阻止事件冒泡大致有兩種辦法：

1）使用 return false;
2）使用 event.stopPropagation();

其實(shí)兩者的原理差不多，就是屏蔽要冒泡的對象

$(function(){
   $('.click').click(functon(event){
     $('.pop').show();
     event.stopPropagation();
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
})

或者：

$(function(){
   $('.click').click(functon(){
     $('.pop').show();
     return false;
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
})

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: