jQuery點擊其他地方時選單消失的實作方法_jquery

本文實例講述了jQuery點擊其他地方時選單消失的實作方法。分享給大家參考，具體如下：

<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){
  //写要执行的内容....吥啦不啦
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

事情是這樣的,比如我點擊一個div顯示出一個選單,當點擊其他地方,選單消失,其中一個思路就是給document綁定上click事件,如果是點擊div就顯示選單,如果是點擊document就隱藏選單,但是如果點擊div也等於是點擊了document,所以在點擊div的事件裡面執行完要執行的語句,然後終止js的冒泡,否則會既執行了div的點擊事件,又繼續冒泡到document事件上,執行了document的click的內容

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

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

event物件包含了一個重要屬性：target(W3C)/srcElement(IE)，這個屬性標識了觸發事件的原始元素，思路二就是要利用這個屬性。我們可以直接對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) { //循环判断至跟节点，防止点击的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //点击的不是div或其子元素
});

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery操作json資料技巧摘要》、《jQuery切換特效與技巧總結》、《 jQuery拖曳特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法摘要》、《jquery選擇器用法總結》及《jQuery常用插件及用法摘要》

希望本文所述對大家jQuery程式設計有所幫助。