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:
Outer div element
Outer div element
The jQuery 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:
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:
Another way to prevent default behavior is to return false. The effect is the same. The code is as follows:
Similarly, the above bubbling event can also be handled by returning false.
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
