Click anywhere to hide the elements you want to hide (no bug/jquery version)

The first two steps of 1>

1): Binds the event handler to the document's Click event, making it hide the div

2): Binds the event handler to the Div's Click event, prevents the event from bubbling to the document, and calls the document's OnClick method to hide the div.

1<script type= "Text/javascript" >2     functionStoppropagation (e) {3         if(e.stoppropagation)4 e.stoppropagation ();5         Else 6E.cancelbubble =true; 7     } 8 9$ (document). Bind (' click ',function(){ Ten$ (' #test '). CSS (' Display ', ' none '));  One     });  A  -$ (' #test '). Bind (' click ',function(e) { - stoppropagation (e); the     });  -</script>

So 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 always bubbles up the div itself, which prevents the event from bubbling and does not invoke the Doument onclick method to cause the div to be hidden, thus fulfilling our needs.

2> the second kind

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.

1<script type= "Text/javascript" >2$ (document). Bind (' click ',function(e) {3  　　　　 varE = e | | window.event;//Browser Compatibility4  　　　　 varElem = E.target | |e.srcelement;5  　　　　  while(Elem) {//loop judgment to the node, prevent the click is div child element6  　　　　 if(elem.id && elem.id== ' test ') { 7  　　　　　　 return; 8  　　　　 } 9Elem =Elem.parentnode;Ten  　　　　 }  A$ (' #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 you click anywhere on the page, and the event handler will determine if the event source is a id==test div or its child elements.

If it is a method return, hiding the Div will also enable us to achieve our needs.

Click anywhere to hide the elements you want to hide (no bug/jquery version)