事件發生後，浏覽器通常首先觸發事件發生元素上的事件處理程序，然後是它的父元素，父元素的父元素……依此類推， 直到文檔的根元素為止。這被稱為 事件冒泡，是事件傳播的最常見的方式。當處理好一個事件後， 你可能想要停止事件的傳播，不希望它繼續冒泡。
1、事件冒泡
<%@ 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>
<!-- 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() 方法來實現。
當用戶未填寫用戶名時，阻止表單提交：
<%@ 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>
<!-- 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 事件冒泡和默認行為（此元素沒有默認行為）
});
1、通過返回false來取消默認的行為並阻止事件起泡。
2、通過使用 preventDefault() 方法只取消默認的行為。
3、通過使用 stopPropagation() 方法只阻止一個事件起泡。