How to implement jQuery to make the menu disappear when clicking elsewhere_jquery

The example in this article describes how to implement jQuery to make the menu disappear when clicking elsewhere. Share it with everyone for your reference, the details are as follows:

<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>

The thing is like this. For example, if I click on a div, a menu will be displayed. When I click elsewhere, the menu disappears. One idea is to bind a click event to the document. If the div is clicked, the menu will be displayed. If the document is clicked, the menu will be displayed. Just hide the menu, but if you click on the div, it is equivalent to clicking on the document, so execute the statement to be executed in the click event of the div, and then terminate the bubbling of js, otherwise the click event of the div will be executed and continue to bubble. Go to the document event and execute the click content of the document

What I mean is that div also belongs to document, so clicking on div also clicks on document. Therefore, without any restrictions, when clicking on div, the methods of div and document will be executed. The specific content of the restriction is in Click the div method to stop bubbling. The specific method is to use e.stopPropagation() → "applicable to non-ie" method. If it is ie, e.cancelBubble=true

Another idea is to determine which trigger source is the click method of the document. If it is a div, no operation will be performed, that is, return. If it is not a div, then the menu will be hidden as follows

The event object contains an important attribute: target(W3C)/srcElement(IE). This attribute identifies the original element that triggered the event. The second idea is to use this attribute. We can directly bind an event handler to the click event of the document, and determine in the event handler whether the event source is the div element with id==test or its sub-element. If so, the method return does not perform any operation. If not, the event is hidden. 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或其子元素
});

Readers who are interested in more jQuery-related content can check out the special topics on this site: "A summary of jQuery operation json data techniques", "A summary of jQuery switching special effects and techniques", " Summary of jQuery drag and drop special effects and techniques", "Summary of jQuery extension techniques", "Summary of common classic jQuery special effects", "jQuery animation and special effects Usage summary ", "jquery selector usage summary " and "jQuery common plug-ins and usage summary "

I hope this article will be helpful to everyone in jQuery programming.