JQuery prevents events from bubbling-JS Tutorial-php.cn

JQuery prevents events from bubbling

高洛峰

Release： 2016-11-16 13:03:44

Original

1104 people have browsed it

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>

Copy after login

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>

Copy after login

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();    //  阻止事件冒泡
        });
    });

Copy after login

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>

Copy after login

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>

Copy after login

//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>

Copy after login

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;
        });
    });

Copy after login