JS Bubble and block default behavior

Stoppropagation Stop Bubbling

Preventdefault Blocking default behavior

return false to stop bubbling and to block the default behavior.

The execution order of the bubbling is performed by the element that triggered the event toward the parent element layer level.

However, if the current element does not block the default behavior, and the parent element blocks the default behavior, the default behavior is not triggered.

Sample Code

<! DOCTYPE html>
After the browser runs:
Defining events
1. Do not block default behavior, do not block bubbling
<script>    $ (document). Ready (function () {        $ ("#parent"). Click (function (e) {            Console.log ("The parent is Clicked! ");        });        $ ("#middle"). Click (function (e) {            Console.log ("Middle is clicked!");        });        $ ("#self"). Click (function (e) {            Console.log ("Self is clicked!");});    </script>
Execution Result:
Self is clicked!Middle is clicked!Parent is clicked!after printing the information, jump to 111.html2. The current element does not block the default behavior, but the parent element blocks the default behavior
<script>    $ (document). Ready (function () {        $ ("#parent"). Click (function (e) {            e.preventdefault ();            Console.log ("Parent is clicked!");        });        $ ("#middle"). Click (function (e) {            Console.log ("Middle is clicked!");        });        $ ("#self"). Click (function (e) {            Console.log ("Self is clicked!");});    </script>
Execution Result:
Self is clicked!Middle is clicked!Parent is clicked!after printing the information, do not jump (default behavior is not performed) 3. The current element does not block the default behavior, but prevents bubbling. Parent element still blocks default behavior
<script>    $ (document). Ready (function () {        $ ("#parent"). Click (function (e) {            e.preventdefault ();            Console.log ("Parent is clicked!");        });        $ ("#middle"). Click (function (e) {            Console.log ("Middle is clicked!");        });        $ ("#self"). Click (function (e) {            e.stoppropagation ();            Console.log ("Self is clicked!");})    ; </script>
Execution Result:
Self is clicked!after printing the information, the page jumps to 111.html. (The blocking default behavior of the parent element is not related to the current element after blocking the bubbling.) )
JS Bubble and block default behavior