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

Source: Internet
Author: User

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.srcelement;  while(Elem) {//loop judgment to the node, prevent the click is div child element      if( && ' 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.