Preventing bubble events in jQuery preventing default behavior

Keywords: Javascript JQuery

The bubbling event is to click the child node, which will trigger the parent node and the ancestor node to click the event.

Here is the html code:

<body>
<div id="content">
    Outer div element
    <span>Inner span element</span>
    Outer div element
</div>

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

The corresponding jQuery code is as follows:

<script type="text/javascript">
$(function(){
    // Binding a click event for a span element
    $('span').bind("click",function(){
        var txt = $('#MSG '). html() + "< p > Inner span element is clicked. < P / >"; / / get html information
        $('#msg').html(txt); / / set html information
    });
    // Binding a click event for a div element
    $('#content').bind("click",function(){
        var txt = $('#MSG '). Html() + "< p > outer div element is clicked. < P / >;
        $('#msg').html(txt);
    });
    // Binding 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 span, the click event of div and body will be triggered. When you click div, the click event of body will be triggered.

How to prevent this kind of bubbling?

Amend to read:

<script type="text/javascript">
$(function(){
       // Binding a click event for a span element
    $('span').bind("click",function(event){
        var txt = $('#MSG '). Html() + "< p > Inner span element is clicked. < P / >;
        $('#msg').html(txt);
        event.stopPropagation();    //  Prevent events from bubbling
    });
    // Binding a click event for a div element
    $('#content').bind("click",function(event){
        var txt = $('#MSG '). Html() + "< p > outer div element is clicked. < P / >;
        $('#msg').html(txt);
        event.stopPropagation();    //  Prevent events from bubbling
    });
    // Binding 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 event bubbling

Sometimes there are default events when you click Submit. For example, jump to another interface. But if you don't pass the verification, you shouldn't jump. At this time, you can set event.preventDefault(); / / to prevent the default behavior (form submission).

Here is the case:

<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val(); / / get the value of the element. The val() method returns or sets the value of the selected element.
         if(username==""){     //Judge whether the value is empty
             $("#MSG "). HTML (" < p > the value of the text box cannot be empty. < / P > "); / / prompt
             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="Submission" 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(); / / get the value of the element
         if(username==""){     //Judge whether the value is empty
             $("#MSG "). HTML (" < p > the value of the text box cannot be empty. < / P > "); / / prompt
             return false;
         }
   })
})
</script>

Similarly, the above bubble events can also be handled by return false.

<script type="text/javascript">
$(function(){
       // Binding a click event for a span element
    $('span').bind("click",function(event){
        var txt = $('#MSG '). Html() + "< p > Inner span element is clicked. < P / >;
        $('#msg').html(txt);
        return false;
    });
    // Binding a click event for a div element
    $('#content').bind("click",function(event){
        var txt = $('#MSG '). Html() + "< p > outer div element is clicked. < P / >;
        $('#msg').html(txt);
        return false;
    });
    // Binding 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>

Posted by gutogouveia on Sun, 03 May 2020 15:06:10 -0700

Programmer Group

Preventing bubble events in jQuery preventing default behavior

Hot Keywords