快捷導(dǎo)航

jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法

更新時(shí)間：2016年04月22日 11:14:13 作者：西瓜霜

這篇文章主要介紹了jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)擊其他地方讓菜單消失的實(shí)現(xiàn)思路與解決方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //寫(xiě)要執(zhí)行的內(nèi)容....吥啦不啦
    stopPropagation(e);//調(diào)用停止冒泡方法,阻止document方法的執(zhí)行
  });
</script>

事情是這樣的,比如我點(diǎn)擊一個(gè)div顯示出一個(gè)菜單,當(dāng)點(diǎn)擊其他地方,菜單消失,其中一個(gè)思路就是給document綁定上click事件,如果是點(diǎn)擊div就顯示菜單,如果是點(diǎn)擊document就隱藏菜單,但是如果點(diǎn)擊div也等于是點(diǎn)擊了document,所以在點(diǎn)擊div的事件里面執(zhí)行完要執(zhí)行的語(yǔ)句,然后終止js的冒泡,否則會(huì)既執(zhí)行了div的點(diǎn)擊事件,又繼續(xù)冒泡到document事件上,執(zhí)行了document的click的內(nèi)容

我的意思就是div也屬于document,所以點(diǎn)擊div也是點(diǎn)擊了document,所以在不進(jìn)行任何限制的情況下,點(diǎn)擊div的時(shí)候,div和document的方法都會(huì)執(zhí)行,進(jìn)行限制的具體內(nèi)容就是在點(diǎn)擊div的方法里面停止冒泡,具體方法就是用e.stopPropagation()→"適用于非ie"方法,如果是ie就是e.cancelBubble=true

還有一種思路就是在document的click方法中判斷觸發(fā)的源是哪一個(gè),如果是div的話就不執(zhí)行任何操作也就是return,如果不是div的話,那就將菜單隱藏具體如下

event對(duì)象包含了一個(gè)重要屬性：target(W3C)/srcElement(IE)，這個(gè)屬性標(biāo)識(shí)了觸發(fā)事件的原始元素，思路二就是要利用這個(gè)屬性。我們可以直接對(duì)document的click事件綁定事件處理程序，在事件處理程序中判讀事件源是否為id==test的div元素或其子元素，如果是則方法return不做操作，如果不是則隱藏該div。

$(document).bind('click',function(e){
    var e = e || window.event; //瀏覽器兼容性
    var elem = e.target || e.srcElement;
    while (elem) { //循環(huán)判斷至跟節(jié)點(diǎn)，防止點(diǎn)擊的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //點(diǎn)擊的不是div或其子元素
});

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

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

您可能感興趣的文章: