JQuery blocks event bubbling, and jquery blocks bubbling.

JQuery blocks event bubbling, and jquery blocks bubbling.

During our usual development process, we will certainly encounter a situation where a div (this div can be an element) wraps a div. However, events are added to both Divs, if you click the div in it, we want to handle the div event. However, we do not want the div event to be executed on the outer layer. At this time, we need to block the bubble.

In other words, you watch TV at home and hide in your own small room, but you don't want your voice to be passed to the ears of your parents next door. At this time, you may be hiding in your bed, or the sound insulation effect on the walls is good. Blocking sound can be understood as blocking bubbles.

Three methods to prevent event bubbles

1. return false: the default events and bubble events can be blocked.

2. event. cancelBubble = true under event. stopPropagation/IE;: the event can be blocked but the default event is allowed.

3. event. preventDefault ();/event. returnValue = false in IE: the default event can be blocked, but the bubble event is allowed.

The above three methods can be used properly in different scenarios. below is the code and you can perform some tests on your own:

<! DOCTYPE html>