jQuery prevents event bubbling and prevents label default behavior (like hyperlinks)

When I was writing JavaScript recently, I encountered a problem, that is, the page jumps when it should not jump

, and it does not move when it should jump

. Baidu has solved the problem in many ways, and it

is sorted as follows

:

1. Block events Bubbling
Event bubbling generally points to upward bubbling, which is common in click events. My understanding is: I click on a certain part inside, and you stay outside for me. The code example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test bubbling event</title>
    <script type="text/javascript" src="jqueryjs/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("span").click(function () {
                $(" #msg").html($("#msg").html()+"<P>The inner span element is clicked</P>");

                $("#msg").html($("#msg").html()+"<P>外层div元素被单击</P>");
            });
            $("body").click(function () {
                $("#msg").html($("#msg").html()+"<P>body元素被单击</P>");
            });
        });
    </script>
</head>
<body>
    
    <div id="content" style="width: 200px;border: 1px solid red;">
        外层div元素<br>
        <span style="background: silver;border: 2px dashed yellow;">Inner span element</span><br>     <br>          </div>
        Outer div element

    <div id="msg"></div>
</body>
</html>

At this point, no JavaScript code was written to prevent the event from bubbling, so after clicking the inner span tag, the three click events (the inner span , the outer div, body) will be executed (no pictures will be posted, please do it yourself to see the effect

)

Now, let's add event.stopPropagation(); to prevent the event from bubbling, the code is modified as follows (only the span of JavaScript is modified section):
$("span").click(function (event) {
      $("#msg").html($("#msg").html()+"<P>The inner span element is clicked </P>");
      event.stopPropagation(); //Prevent the span's click event from bubbling, and prevent him from bubbling to the upper div and body
   });
At this point, click the inner sapn element, outer div and body The click event will no longer be triggered, please verify the result by yourself.

2. Prevent the default behavior of the
label the label is just the opposite, it generally points to the next inheritance. Commonly seen in hyperlink a. My understanding is: when there are many span elements under the hyperlink a, the effect I hope is to click on a certain element, and the hyperlink a will not jump; click other elements, the hyperlink jumps, which can be used for the like function. The example code is as follows:
<!DOCTYPE html>
<html lang="

    <title>Test bubbling event</title>
    <script type="text/javascript" src="jqueryjs/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $( function () {
            $("span").click(function (event) {
                $("#msg").html($("#msg").html()+"<P>Inner span element sheet Click </P>");
                event.stopPropagation(); //Stop the span's click event from bubbling up to the upper div and body
            });
            $("#content").click(function () {
                $("#msg").html($("#msg").html()+"<P>The outer div element is clicked</P>");
            });
            $("body") . click(function () {
                $("#msg").html($("#msg").html()+"<P>body元素被单击</P>");
            });

                event.preventDefault(); //Prevent the default behavior
    });
At this time, click the inner sapn element, the hyperlink a will not jump again, please verify the result by yourself.

3. Prevent bubbling events and default behavior
This is the final result I hope: clicking on the span hyperlink a does not jump, and clicking on other hyperlinks jumps. The html code is the same as the code in 2, and the modified JavaScript code is as follows:
$("span").click(function (event) {
        $("#msg").html($("#msg").html()+" <P>The inner span element is clicked</P>");
        return false; //Prevent event bubbling and default behavior
     });
At this point, click the span hyperlink a will not jump, click other hyperlinks to jump Turn. Please verify the result by yourself.

The writing is not good, if there is any inadequacy, please advise.
thanks for reading!

jQuery prevents event bubbling and prevents label default behavior (like hyperlinks)

Guess you like