JQuery는 이벤트 버블링을 방지합니다.-JS 튜토리얼-php.cn

JQuery는 이벤트 버블링을 방지합니다.

高洛峰

풀어 주다： 2016-11-16 13:03:44

원래의

1087명이 탐색했습니다.

버블링 이벤트는 하위 노드를 클릭하는 것으로, 상위 노드와 상위 노드의 클릭 이벤트가 위쪽으로 트리거됩니다.

일반적인 개발 과정에서 div를 하나의 div로 래핑하는 상황이 발생합니다(이 div는 요소일 수 있음). 하지만 클릭하면 이벤트가 두 div에 모두 추가됩니다. 이 div의 이벤트는 div 내부에 있지만 외부 div의 이벤트도 실행되는 것을 원하지 않습니다. 이때 버블링을 방지하기 위해 사용해야 합니다.

평신도 입장에서 말하면, 집에서 TV를 시청하고, 자신의 작은 방에 숨어 있는데, 그 소리가 옆집 부모님 귀에 닿는 것을 원하지 않는 이때, 당신은. 이불 밑이나 벽에 가려질 수 있습니다. 방음 효과가 매우 좋습니다. 소리를 차단한다는 것은 기포를 방지하는 것으로 이해될 수 있습니다.

<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는 이벤트 버블링을 방지합니다.

결과 표시

해당 jQuery 코드는 다음과 같습니다.

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

로그인 후 복사

작은 div를 클릭하면, 큰 div가 div 및 body의 클릭 이벤트가 트리거됩니다. 큰 div를 클릭하면 본문의 클릭 이벤트가 발생합니다.

이런 버블링 이벤트를 방지하려면 어떻게 해야 할까요?

다음과 같이 수정하세요.

<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(); // 이벤트 버블링 방지

때때로 제출 버튼을 클릭하면 기본 이벤트가 발생합니다. 예를 들어, 다른 인터페이스로 점프합니다. 하지만 검증을 통과하지 못한 경우 점프해서는 안 됩니다. 이때 event.preventDefault(); //기본 동작(양식 제출)을 방지하도록 설정할 수 있습니다.

html 부분

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

로그인 후 복사

JQuery는 이벤트 버블링을 방지합니다.

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

로그인 후 복사

//기본 동작 방지(양식 제출) event.preventDefault()

기본 동작을 방지하는 또 다른 방법은 false를 반환하는 것입니다. 효과는 동일합니다.

코드는 다음과 같습니다.

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

로그인 후 복사

마찬가지로 위의 버블링 이벤트도 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;
        });
    });

로그인 후 복사