JQuery prevents event bubbling

2020-03-26 21:26:55
OfStack

Here is the HTML code section:


<body>
<div id="content">
     The outer layer div The element 
    <span> The inner layer span The element </span>
     The outer layer div The element 
</div>
<div id="msg"></div>
</body>

The corresponding jQuery code is as follows:


<script type="text/javascript">
$(function(){
    //Bind the click event for the span element
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p> The inner layer span Element is clicked .<p/>";//Get HTML information
        $('#msg').html(txt);//Set HTML information
    });
    //Bind the click event for the div element
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p> The outer layer div Element is clicked .<p/>";
        $('#msg').html(txt);
    });
    //Bind the click event for the body element
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body Element is clicked .<p/>";
        $('#msg').html(txt);
    });
})
</script>

When you click on span, the div and body click events are triggered. Clicking on div triggers the body click event.

How do you prevent this bubbling event from happening?

The modifications are as follows:


<script type="text/javascript">
$(function(){
       //Bind the click event for the span element
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p> The inner layer span Element is clicked .<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  Stop the event from bubbling
    });
    //Bind the click event for the div element
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p> The outer layer div Element is clicked .<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  Stop the event from bubbling
    });
    //Bind the click event for the body element
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body Element is clicked .<p/>";
        $('#msg').html(txt);
    });
})
</script>

Event. StopPropagation (); // prevent the event from bubbling

Sometimes clicking the submit button will result in some default events. Like jump to another interface. But if it doesn't pass validation, it shouldn't jump. In this case, you can set event.preventdefault (); // prevents default behavior (form submission).

Here's the case:


<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //Gets the value of the element, and the val() method returns or sets the value of the selected element.
         if(username==""){     //Determines if the value is null
             $("#msg").html("<p> The value of the text box cannot be empty .</p>");  //Prompt information
             event.preventDefault();  //Block default behavior (form submission)
         }
   })
})
</script>

HTML part:


<body>
<form action="test.html">
 User name: <input type="text" id="username" />
<br/>
<input type="submit" value=" submit " id="sub"/>
</form>
<div id="msg"></div>
</body>

Another way to prevent default behavior is to return false. The effect is the same.

The code is as follows:


<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //Gets the value of the element
         if(username==""){     //Determines if the value is null
             $("#msg").html("<p> The value of the text box cannot be empty .</p>");  //Prompt information
             return false;
         }
   })
})
</script>

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


<script type="text/javascript">
$(function(){
       //Bind the click event for the span element
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p> The inner layer span Element is clicked .<p/>";
        $('#msg').html(txt);
        return false;
    });
    //Bind the click event for the div element
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p> The outer layer div Element is clicked .<p/>";
        $('#msg').html(txt);
        return false;
    });
    //Bind the click event for the body element
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body Element is clicked .<p/>";
        $('#msg').html(txt);
    });
})
</script>