Home > Article > Web Front-end > JQuery prevents events from bubbling

JQuery prevents events from bubbling

高洛峰Original: 2016-11-16 13:03:441060browse

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

In our usual development process, we will definitely encounter the situation of wrapping a div in a div (this div can be an element). However, events are added to both divs. If we click on the div inside, we We want to handle the events of this div, but we don't want the events of the outer div to be executed as well. At this time, we need to prevent bubbling.

To put it in layman’s terms, you are watching TV at home and hiding in your own small room, but you don’t want the sound to reach the ears of your parents next door. At this time, you may be hiding under the quilt, or the sound insulation effect of the wall is very poor. Well, blocking sound can be understood as blocking bubbling.

<style>
        #content{
            width: 140px;
            border: 1px solid blue;
        }
        #msg{
            width: 100px;
            height: 100px;
            margin: 20px;
            border: 1px solid red;
        }
</style>
 
 
　　<body>
    　　　　　　<div id="content">
      　　　　　　　　　　　　外层div
         　　　　　　　　　　　　　　<div id="msg">
             　　　　　　　　　　　　　　　　内层div
         　　　　　　　　　　　　　　</div>
     　　　　　　</div>
 
　　</body>

JQuery prevents events from bubbling

Display results

The corresponding jQuery code is as follows:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(function(){        // 为内层div绑定click事件        $("#msg").click(function(){
            alert("我是小div");
        });     // 为外层div元素绑定click事件        $("#content").click(function(){
            alert("我是大div");
        });        // 为body元素绑定click事件        $("body").click(function(){
            alert("我是body");
        });
    });        
        
    </script>

When the small div is clicked, the click event of the large div and body will be triggered. When the large div is clicked, the click event of the body will be triggered.

How to prevent this kind of bubbling event from happening?

Modify as follows:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(function(){
        // 为内层div绑定click事件
        $("#msg").click(function(event){
            alert("我是小div");
            event.stopPropagation();    //  阻止事件冒泡
        });
     // 为外层div元素绑定click事件
        $("#content").click(function(event){
            alert("我是大div");
            event.stopPropagation();    //  阻止事件冒泡
        });
        // 为body元素绑定click事件
        $("body").click(function(event){
            alert("我是body");
            event.stopPropagation();    //  阻止事件冒泡
        });
    });

event.stopPropagation(); // Prevent events from bubbling

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 set event.preventDefault(); //Prevent the default behavior (form submission).

html part

<body>
        <form action="test.html">
            用户名：<input type="text" id="username" />
            <br/>
            <input type="submit" value="提交" id="sub"/>
        </form>
   </body>

JQuery prevents events from bubbling

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#sub").click(function(event){
                //获取元素的值，val() 方法返回或设置被选元素的值。
                var username = $("#username").val();  
                //判断值是否为空
                if(username==""){ 
                    //提示信息
                    //alert("文本框的值不能为空");
                    $("#msg").html("<p>文本框的值不能为空.</p>"); 
                  //阻止默认行为 ( 表单提交 )
                    event.preventDefault();  
                }
            });
        });
    </script>

//Prevent default behavior (form submission) event.preventDefault();

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

The code is as follows:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#sub").click(function(event){
                //获取元素的值，val() 方法返回或设置被选元素的值。
                var username = $("#username").val();  
                //判断值是否为空
                if(username==""){ 
                    //提示信息
                    //alert("文本框的值不能为空");
                    $("#msg").html("<p>文本框的值不能为空.</p>"); 
                  //阻止默认行为 ( 表单提交 )
                    //event.preventDefault();  
                  return false;
                }
            });
        });
    </script>

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

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    $(function(){
        // 为内层div绑定click事件
        $("#msg").click(function(event){
            alert("我是小div");
            //event.stopPropagation();    //  阻止事件冒泡
                return false;
        });
     // 为外层div元素绑定click事件
        $("#content").click(function(event){
            alert("我是大div");
            //event.stopPropagation();    //  阻止事件冒泡
                 return false;
        });
        // 为body元素绑定click事件
        $("body").click(function(event){
            alert("我是body");
            //event.stopPropagation();    //  阻止事件冒泡
                return false;
        });
    });

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript inheritance methodNext article：Detailed explanation of JavaScript inheritance method

See more

JQuery prevents events from bubbling

Related articles