Query-to-dom event triggering has a bubbling feature. Sometimes this feature can be used to reduce duplication of code, but sometimes we don't want events to bubble. This time will stop jquery.event bubbling.
At the beginning of Jquery.event's documentation, it was known that the Jquery.event object was an event object that met the standards of the Internet, while jquery.event removed the steps to check for compatible ie.
Jquery.event provides a very simple way to prevent event bubbling:event.stoppropagation ();
JS Code
- $ ("P"). Click (function(event) {
- Event.stoppropagation (); //Do something
- })
However, this method has no effect on events that use live bindings and requires an easier way to prevent events from bubbling:return false;
JS Code
- $ ("P"). Live ("click", function() {
- $ (this). After ("another paragraph!");
- return false;
- });
In addition JavaScript prevents bubbling
There are two ways to prevent bubbling events, the first is the method of IE, the second is the DOM method, as for why to be divided into two methods to discuss, here is not to discuss, in short, the browser some crappy problem, good nonsense not to say, directly paste code:
JS Code
- //block bubbling events
- function stopbubble (e) {
- if (e && e.stoppropagation) { //non ie
- e.stoppropagation ();
- }
- else { //ie
- window.event.cancelbubble = true ;
- }
- }
For example: Google's home page more options, do not know can go to see http://www.google.com/.
Here to apply two click events, one is Div.onclick, the other is Document.onclick, then the problem arises, in the call Div.onclick, due to the presence of bubbling events, will automatically call Document.onclick, because the order of bubbling is from the inside out
(div->body->document->html) So the Div.onclick event will be overwritten, it will not be executed, the solution is actually very simple oh, is to stop the bubbling event when executing Div.onclick, then how to stop it, just call the function above OK! Ha ha!
PS: In the introduction of the way to block the default browser behavior, similar, here will not repeat it.
JS Code
- function Stopdefault (e) {
- //block default browser action (web)
- if (e && E.preventdefault)
- E.preventdefault ();
- how to block the default action of a function in//ie
- Else
- Window.event.returnValue = false;
- return false;
- }