기본 이벤트 거품 이벤트 차단

5633 단어
event.stopPropagation();이벤트의 거품을 막다
event.preventDefault();기본 비헤이비어 차단
이벤트의 거품과 기본 행동을 동시에 막다
return false
eg: 이벤트 거품 방지
<script type="text/javascript">  
            $(function() {  
                //  <span>   click    
                $("span").click(function() {  
                    $("#msg").html($("#msg").html() + "<p> span </p>");  
                });  
                //  Id   content   <div>   click    
                $("#content").click(function() {  
                    $("#msg").html($("#msg").html() + "<p> div </p>");  
                });  
                //  <body>   click    
                $("body").click(function() {  
                    $("#msg").html($("#msg").html() + "<p>body </p>");  
                });  
            });  
</script> 
<!--css-->
<style>
#content{
  background:#0f0;
}
</style>
<div id="content">
   div<br/>
  <span style="background:red;"> span</span><br/>
   div
</div>
<div id="msg">
//  <span>   click    
$("span").click(function(event) {   //   
    $("#msg").html($("#msg").html() + "<p> span </p>");  
    event.stopPropagation();    //  <span>   click    
}); 

기본 비헤이비어 차단
<html>  
    <head>  
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
            $(function() {  
                $(":submit").click(function(event) {     //   
                    //
                    if ($(":text").val() == "") {     
                        $("#msg").text(" ");  
                        event.preventDefault();     // ( )  
                    }  
                });  
            });  
        </script>       
    </head>  
    
    <!-- HTML -->  
    <body>  
        <form action="register.action">  
             <input type="text" name="id" />  
            <input type="submit" value=" " />  
            <div id="msg"></div>  
        </form>  
    </body>  
</html>  

기본 비헤이비어 및 거품 발생 방지
$(":submit").click(function(event) {     //   
    //
    if ($(":text").val() == "") {     
        $("#msg").text(" ");  
        return false;       // ( )   
    }  
});  


$("span").click(function(event) {   //   
    $("#msg").html($("#msg").html() + "<p> span </p>");  
    return false;   //  <span>   click  ( )  
});  

좋은 웹페이지 즐겨찾기