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

最新推荐文章于 2022-10-07 21:15:34 发布

霜月枫桥

最新推荐文章于 2022-10-07 21:15:34 发布

阅读量701

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

1、事件冒泡

[javascript] view plain copy

<%@ page language="java" import="java.util." pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!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() {
                //为 <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>

        
        <style type="text/css">
            #content {
                background: #b17af5;
            }
        </style>
    </head>

    
    <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 事件函数：

[javascript] view plain copy

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

此时点击内部 <span> 元素时，只会触发自身的 click 事件，不会再向上冒泡。
2、阻止默认行为
有时候用户的操作未满足某些条件时，需要阻止某些元素的默认行为，如链接的跳转和表单的提交等，jQuery 提供了 preventDefault() 方法来实现。
当用户未填写用户名时，阻止表单提交：

[javascript] view plain copy

<%@ page language="java" import="java.util." pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

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

    
    <body>
        <form action="register.action">
            用户名<input type="text" name="id" />
            <input type="submit" value="注册" />
            <div id="msg"></div>
        </form>
    </body>
</html>

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

return false 既能阻止冒泡，还能阻止元素默认行为（经测试，仅用于jQuery中）
如：

[javascript] view plain copy

$(":submit").click(function(event) {     //为方法添加一个事件对象参数
    //当未输入用户名时，提示并阻止提交
    if ($(":text").val() == "") {
        $("#msg").text("用户名不能为空");
        return false;       //阻止提交按钮的默认行为（提交表单）和事件冒泡
    }
});

[javascript] view plain copy

$("span").click(function(event) {   //为方法添加一个事件对象参数
    $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
    return false;   //阻止 <span> 的 click 事件冒泡和默认行为（此元素没有默认行为）
});

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中的事件冒泡和阻止默认行为

jQuery 中的事件冒泡和阻止默认行为参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社1、事件冒泡[javascript] view plain copy"java" import="java.util.*" pageEncoding="utf-8"%> String
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。