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

前端之家收集整理的这篇文章主要介绍了浅谈jQuery 中的事件冒泡和阻止默认行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、事件冒泡

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <!-- CSS -->
    <style type="text/css"&gt;
        #content {
            background: #b17af5;
        }       
    </style>
</head>

<!-- HTML -->
<body>
    <div id="content"&gt;
        外层div元素<br />
        <span style="background: silver;"&gt;内层span元素</span><br />
        外层div元素
    </div><br />
    <div id="msg"&gt;</div>
</body>

当点击内部 元素时,会触发自身及外层

和 的点击事件,这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

事件冒泡可能会引起意料之外的效果,有时候需要阻止事件的冒泡行为,使用 stopPropagation() 方法来实现。

修改 元素的 click 事件函数

元素绑定 click 事件 $("span").click(function(event) { //为方法添加一个事件对象参数 $("#msg").html($("#msg").html() + "

内层span元素被单击

"); event.stopPropagation(); //阻止 的 click 事件冒泡 });

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

2、阻止默认行为

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

用户未填写用户名时,阻止表单提交:

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- HTML -->
<body>
    <form action="register.action"&gt;
        <a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a><input type="text" name="id" />
        <input type="submit" value="注册" />
        <div id="msg"&gt;</div>
    </form>
</body>

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

如:

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

内层span元素被单击

"); return false; //阻止 的 click 事件冒泡和默认行为(此元素没有默认行为) });

以上这篇浅谈jQuery 中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章