Click the two ideas hidden outside the page Div pop-up window

In this article for everyone to introduce two ideas to achieve click on the page other places to hide the Div, the first is the click event handler for the document to bind the event.

The first way of thinking is two steps.

First step: Bind the event handler to the document's Click event to hide the div

The second step is to bind the event handler to the Div's Click event, prevent the event from bubbling to the document, and call the document's OnClick method to hide the div.

 <script type= "Text/javascript" > Span style= "color: #0000ff;" >function   Stoppropagation (e) { if 　　  (E.stoppropagation) e.stoppropagation ();  else   e.cancelbubble  = true   ' click ',   () {$ ( ' #test '). CSS (' Display ', ' none ') ); });     $ ( ' #test '). Bind (' click ', function   (E) { Stoppropagation (e); });  </script>  

This way, when you click on the page non-Div area, the direct or layer bubbling will call the document's OnClick method, hide the Div, and click on the DIV or its child elements, the event will always bubble the div itself, this time would prevent the event to continue bubbling, The Doument's OnClick method is not invoked to cause the div to be hidden, thus fulfilling our needs.

Idea two

As we mentioned earlier, when triggering an event on the DOM, an event object is generated that contains all the information related to the event, including information about the element that generated the event, the type of event, and so on, and the parameters passed in by the Click event handler of the Div are the event object. There are several different ways to access an event object in IE, depending on how you specify the event handler. When you add an event handler directly for a DOM element, the event object exists as a property of the Window object.

The event object contains an important property: Target (Internet Explorer), which identifies the original element that triggered the event, and the second idea is to take advantage of the/srcelement property. We can bind the event handler directly to the document's Click event, and in the event handler, interpret whether the event source is an id==test div element or its child element, and if so, the method return does not do the operation, if not the div is hidden.

<script type= "Text/javascript" >$ (document). Bind (' Click ',function(e) {varE = e | | window.event;//Browser Compatibility 　　 varElem = E.target | |e.srcelement;  while(Elem) {//loop judgment to the node, prevent the click is div child element 　　　　 if(elem.id && elem.id== ' test ') {return; } elem=Elem.parentnode; } $ (' #test '). CSS (' Display ', ' none ');//The click is not a div or its child elements}); </script> 

This will bubble up to the document's click event when clicking anywhere on the page, and the event handler will determine if the event source is a id==test div or its child elements, and if it is the method return, hiding the Div will also fulfill our needs.

Click the two ideas hidden outside the page Div pop-up window