How does jQuery prevent event bubbling?

Condition: the outer layer has a DIV element and the inner layer has a P element. The relationship exists as follows: DIV is the parent element of the P element, while P is the child element of the outer DIV, there is a relationship between the two. Condition: the outer layer has a DIV element and the inner layer has a P element. The relationship exists as follows: DIV is the parent element of the P element, while P is the child element of the outer DIV, there is a relationship between the two.

Event: now we are all bound to the same event on these two elements, such as the click event.

Result: When we click the P tag of the inner layer, the click Event of the inner layer element is triggered, and the click Event of the outer DIV is also triggered.

JQuery provides three methods to prevent event bubbles.

Method 1: event. stopPropagation ();

Method 2: event. preventDefault ();

Method 3: return false;

Difference: event. stopPropagation () only blocks events from bubbling up and does not block the event itself. Event. preventDefault () only blocks the event itself and does not prevent the event from bubbling up. Return false not only prevents the event from bubbling up, but also blocks the event itself.