How does jQuery prevent this bubbling event from happening_jquery

The bubbling event is to click on the child node, the event will be passed upward, and finally the click event of the parent node and ancestor node will be triggered.

html code part:

Copy code The code is as follows:

                                            Outer div element
                                                                                                                                                                                    Outer div element

The jQuery code is as follows:

Copy code The code is as follows:

When the span is clicked, the click events of the div and body will be triggered. When the div is clicked, the click event of the body is triggered.

How to prevent this kind of bubbling event from happening? Modify as follows:

Copy code The code is as follows:

Sometimes clicking the submit button will have some default events. For example, jump to another interface. But if it does not pass verification, it should not jump. At this time, you can prevent the default behavior by setting event.preventDefault();. The following is a case:

Copy code The code is as follows:

html part:

Copy code The code is as follows:

Username:

Another way to prevent default behavior is to return false. The effect is the same. The code is as follows:

Copy code The code is as follows:

Similarly, the above bubbling event can also be handled by returning false.

Copy code The code is as follows:

jQuery has a bubbling feature for DOM event triggering. Sometimes taking advantage of this feature can reduce duplication of code, but sometimes we don't want events to bubble up. At this time, it is necessary to prevent jQuery.Event from bubbling.