@H_403_0@
1、事件冒泡
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
@H_403_0@当点击内部 元素时，会触发自身及外层 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 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> 和 的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。
@H_403_0@事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为，使用 stopPropagation() 方法来实现。
@H_403_0@修改 元素的 click 事件函数：
元素绑定 click 事件
$("span").click(function(event) { //为方法添加一个事件对象参数
$("#msg").html($("#msg").html() + "@H_403_0@内层span元素被单击");
event.stopPropagation(); //阻止 的 click 事件冒泡
});@H_403_32@
@H_403_0@此时点击内部 元素时，只会触发自身的 click 事件，不会再向上冒泡。
@H_403_0@2、阻止默认行为
@H_403_0@有时候用户的操作未满足某些条件时，需要阻止某些元素的默认行为，如链接的跳转和表单的提交等，jQuery 提供了 preventDefault() 方法来实现。 @H_403_0@当用户未填写用户名时，阻止表单提交：
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
@H_403_0@如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。
@H_403_0@如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- HTML -->
<body>
<form action="register.action">
<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a><input type="text" name="id" />
<input type="submit" value="注册" />
<div id="msg"></div>
</form>
</body>方法添加一个事件对象参数
//当未输入用户名时，提示并阻止提交
if ($(":text").val() == "") {
$("#msg").text("用户名不能为空");
return false; //阻止提交按钮的默认行为（提交表单）和事件冒泡
}
});$("span").click(function(event) { //为方法添加一个事件对象参数
$("#msg").html($("#msg").html() + "@H_403_0@内层span元素被单击");
return false; //阻止 的 click 事件冒泡和默认行为（此元素没有默认行为）
});@H_403_32@
@H_403_0@以上这篇浅谈jQuery 中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 原文链接：https://www.f2er.com/jquery/48368.html