Introduction to js blocking of bubbling and jquery blocking event bubbling example _ javascript skills

JQuery provides two methods to prevent event bubbling. Jquery blocks the default action, that is, notifies the browser not to perform the default action associated with the event. The following is a good example. For more information, see Js prevents bubbling
In the process of blocking bubbles, W3C and IE adopt different methods, so we must make the following compatibility.

The Code is as follows:

Function stopPro (evt ){
Var e = evt | window. event;
// If returnValue is set to this attribute, its value takes precedence over the return value of the event handle. Set this attribute to fasle,
// Cancel the default action of the event source element.
// Window. event? E. returnValue = false: e. preventDefault ();
Window. event? E. cancelBubble = true: e. stopPropagation ();
}

Or:

The 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 methods to prevent event bubbles.
Method 1: event. stopPropagation ();

The Code is as follows:

$ ("# P1"). mousedown (function (event ){
Event. stopPropagation ();
});

Method 2: return false;

The Code is as follows:

$ ("# P1"). mousedown (function (event ){
Return false;
});

Jquery blocks the default action to notify the browser not to perform the default action associated with the event.
For example:

The Code is as follows:

$ ("A"). click (function (event ){
Event. preventDefault (); // block the default action, that is, the link does not jump.
Alert (4); // but this will pop up
Event. stopPropagation (); // prevents the bubble event. The Click event of the upper level is not called.
Return false; // not only prevents the event from bubbling up, but also prevents the event itself
});

However, the two methods are different. Return false not only prevents the event from bubbling up, but also blocks the event itself. Event. stopPropagation () only prevents the event from bubbling up, not the event itself.
Use Cases: Lenovo boxes for Google and Baidu. When a drop-down list is displayed, you need to keep the cursor in the text input box when you press the mouse in the drop-down list area.
Jquery case:

The Code is as follows: