浅谈jQuery 中的事件冒泡和阻止默认行为
1、事件冒泡
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<scripttype="text/javascript"src="js/jquery-1.7.2.js"></script>
<scripttype="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-->
<styletype="text/css">
#content{
background:#b17af5;
}
</style>
</head>
<!--HTML-->
<body>
<divid="content">
外层div元素<br/>
<spanstyle="background:silver;">内层span元素</span><br/>
外层div元素
</div><br/>
<divid="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()方法来实现。
当用户未填写用户名时，阻止表单提交：
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<scripttype="text/javascript"src="js/jquery-1.7.2.js"></script>
<scripttype="text/javascript">
$(function(){
$(":submit").click(function(event){ //为方法添加一个事件对象参数
//当未输入用户名时，提示并阻止提交
if($(":text").val()==""){
$("#msg").text("用户名不能为空");
event.preventDefault(); //阻止提交按钮的默认行为（提交表单）
}
});
});
</script>
</head>
<!--HTML-->
<body>
<formaction="register.action">
用户名<inputtype="text"name="id"/>
<inputtype="submit"value="注册"/>
<divid="msg"></div>
</form>
</body>
</html>
如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回false来代替调用stopPropagation()和preventDefault()方法。
如：
$(":submit").click(function(event){ //为方法添加一个事件对象参数
//当未输入用户名时，提示并阻止提交
if($(":text").val()==""){
$("#msg").text("用户名不能为空");
returnfalse; //阻止提交按钮的默认行为（提交表单）和事件冒泡
}
});$("span").click(function(event){ //为方法添加一个事件对象参数
$("#msg").html($("#msg").html()+"<p>内层span元素被单击</p>");
returnfalse; //阻止<span>的click事件冒泡和默认行为（此元素没有默认行为）
});
以上这篇浅谈jQuery中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。