这篇文章主要介绍了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程序设计有所帮助。