js block bubbling
In the process of blocking bubbles, the different methods used by the Internet and IE, then we must do the following compatibility.
Copy CodeThe code is as follows:
function Stoppro (evt) {
var e = evt | | window.event;
ReturnValue If this property is set, its value is higher than the return value of the event handle. Set this property to Fasle,
You can cancel the default action of the source element where the event occurred.
Window.event?e.returnvalue = False:e.preventdefault ();
Window.event?e.cancelbubble=true:e.stoppropagation ();
}
Or:
Copy CodeThe code is as follows:
function cancelbubble (e) {
var evt = e? E:window.event;
if (evt.stoppropagation) {
W3c
Evt.stoppropagation ();
}
else {
Ie
Evt.cancelbubble = true;
}
JQuery provides two ways to prevent event bubbling.
Mode one: Event.stoppropagation ();
Copy CodeThe code is as follows:
$ ("#div1"). MouseDown (function (event) {
Event.stoppropagation ();
});
Mode two: return false;
Copy CodeThe code is as follows:
$ ("#div1"). MouseDown (function (event) {
return false;
});
jquery prevents the default action by notifying the browser not to perform the default action associated with the event.
For example:
Copy CodeThe code is as follows:
$ ("a"). Click (Function (event) {
Event.preventdefault (); Blocking the default action means that the link does not jump.
Alert (4);//But this will pop up.
Event.stoppropagation ();//Prevent bubbling events, the upper-level click events are not called
Return false;//not only prevents events from bubbling up, but also blocks the event itself
});
But there is a difference between the two ways. Return false not only prevents the event from bubbling up, but also blocks the event itself. Event.stoppropagation () Only blocks events from bubbling up, not blocking the event itself.
Scene application: Google and Baidu Lenovo box, when the drop-down list, the user in the drop-down list area when the mouse is pressed to keep the cursor remains in the text input box.
jquery Case:
Copy CodeThe code is as follows:
<script src= "Js/jquery-1.4.3.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#aa"). Click (Function (event) {
Alert ("AA");
Event.preventdefault ();
Event.stoppropagation ();
Alert (3);
});
$ ("#ee"). Click (function () {
Alert ("EE");
});
$ ("a"). Click (Function (event) {
Event.preventdefault ();
Alert (4);
Event.stoppropagation ();
return false;
});
});
</script>
<body>
<div id= "ee" >
Aaaaaaa
<input id= "AA" type= "button" value= "Test"/>
<a href= "http://baidu.com" >baidu.com</a>
</div>
</body>
JS Case:
Copy CodeThe code is as follows:
function tt () {
Alert ("div");
}
function TTT () {
var e = Arguments.callee.caller.arguments[0] | | window.event;
Window.event?e.returnvalue = False:e.preventdefault ();
Alert (3);
Window.event?e.cancelbubble:e.stoppropagation ();
Alert (4);
}
</script>
<body>
<div onclick = "tt ();" >
Ccccc
<a href= "http://baidu.com" onclick= "TTT ();" >baidu.com</a>
</div>
js blocking bubbling and jquery blocking event bubbling examples are introduced