Block bubbling:
1, Stoppropagation () for non IE browser.
2, the Cancelbubble property is true, for IE browser,
And jquery already has a browser-compatible approach, event.stopimmediatepropagation ();
Copy Code code as follows:
<style>
Body
{
Background:black;
}
#myDiv
{
background: #fff;
width:250px;
height:250px;
Display:none;
}
</style>
<div id= "mydiv" >
this is a div;
</div>
<input id= "btn" type= "button" value= "Display div"/>
<script type= "Text/javascript" >
var mydiv = $ ("#myDiv");
$ (function () {
$ ("#btn"). Click (Function (event) {
Showdiv ();//Invoke Display div method
$ (document). One ("click", Fu Nction () {//Bind a shadow-hidden div method
$ (mydiv) to document. Hide ();
});
Event.stoppropagation ();//block event bubbling up
});
$ (mydiv). Click (Function (event) {
Event.stoppropagation ();//block event bubbling up
});
});
Function Showdiv () {
$ (mydiv). FadeIn ();
}
</script>