jQuery 中的事件冒泡和阻止默认行为

1、事件冒泡

<html>  
    <head>  
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <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 type="text/css">  
            #content {  
                background: #b17af5;  
            }         
        </style>  
    </head>  
    
    <!-- HTML -->  
    <body>  
        <div id="content">  
            外层div元素<br />  
            <span style="background: silver;">内层span元素</span><br />  
            外层div元素  
        </div><br />  
        <div id="msg"></div>  
    </body>  
</html>

当点击内部 <span> 元素时，会触发自身及外层 <div> 和 <body> 的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为，使用 stopPropagation() 方法来实现。
修改 <span> 元素的 click 事件函数：

//为 <span> 元素绑定 click 事件  
$("span").click(function(event) {   //为方法添加一个事件对象参数  
    $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");  
    event.stopPropagation();    //阻止 <span> 的 click 事件冒泡  
});

此时点击内部 <span> 元素时，只会触发自身的 click 事件，不会再向上冒泡。

2、阻止默认行为
有时候用户的操作未满足某些条件时，需要阻止某些元素的默认行为，如链接的跳转和表单的提交等，jQuery 提供了 preventDefault() 方法来实现。
当用户未填写用户名时，阻止表单提交：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<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>

如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。
如：

$(":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 事件冒泡和默认行为（此元素没有默认行为）  
});

 

posted @ 2016-05-11 16:02  黑客PK  阅读(948)  评论(0)  编辑  收藏  举报