jquery implements the mouse click outside the div area to hide the div

Bubble definition: When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is known as event bubbling, which bubbles to the top of the DOM tree from the beginning of the original element. (Excerpt from the network)

1. Block event bubbling and do not block event behavior: event.stoppropagation ();

$(function(){$("#link").  Click(function(event){event.  Stoppropagation();}); }); 

2. Block event behavior and block event bubbling: Event.preventdefault ();

$(function(){$("#link").  Click(function(event){event.  Preventdefault();  }); });

3. Block event bubbling and also block event behavior: return false;

$ ( Function ()  {$ ( "#link" ). click (function (event   {returnfalse; })            /span>                
 
 
 
 Block event bubbling: 

$ ("#btn"). Click (Function (Event) {$ ("#demo") ). FadeIn (); $ (document). One ("click", Function () {//) bind a shadow div method $ ("#demo") to document. Hide ();}); Event.stoppropagation ();//click button to block the event from bubbling to document}); $ ("#demo"). Click (Function (event) {event.stoppropagation ();//clicking event in div area prevents bubbling to document}); 

Example:

 <p><a href= "javascript:void (0)" class= "A" > Menu button </a></p><div class= "Menu" ><a href= "http://www.baidu.com" > Baidu </a></div>$ ( ". a"). On ("click", function   (e) { if  ($ (". Menu"). Is (": Hidden" . Menu " else  {$ ( ". Menu" ). Hide (); } $ (document). One ( "click", function   () {$    (. Menu " ". Menu"). On ("click", function   (e) { E.stoppropagation ();});  

JQuery implements a mouse click outside the div area to hide the div