快捷導(dǎo)航

淺談jQuery 中的事件冒泡和阻止默認行為

更新時間：2016年05月28日 11:43:08 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談jQuery 中的事件冒泡和阻止默認行為。小編舉得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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>內(nèi)層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;">內(nèi)層span元素</span><br />
 			外層div元素
 		</div><br />
 		<div id="msg"></div>
 	</body>
</html>

當點擊內(nèi)部 <span> 元素時，會觸發(fā)自身及外層 <div> 和 <body> 的點擊事件，這就是事件冒泡引起的。事件會隨著 DOM 的層次結(jié)構(gòu)依次向上傳播。

事件冒泡可能會引起意料之外的效果，有時候需要阻止事件的冒泡行為，使用 stopPropagation() 方法來實現(xiàn)。

修改 <span> 元素的 click 事件函數(shù)：

//為 <span> 元素綁定 click 事件
$("span").click(function(event) {	//為方法添加一個事件對象參數(shù)
	$("#msg").html($("#msg").html() + "<p>內(nèi)層span元素被單擊</p>");
	event.stopPropagation();	//阻止 <span> 的 click 事件冒泡
});

此時點擊內(nèi)部 <span> 元素時，只會觸發(fā)自身的 click 事件，不會再向上冒泡。

2、阻止默認行為

有時候用戶的操作未滿足某些條件時，需要阻止某些元素的默認行為，如鏈接的跳轉(zhuǎn)和表單的提交等，jQuery 提供了 preventDefault() 方法來實現(xiàn)。

當用戶未填寫用戶名時，阻止表單提交：

<%@ 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) {	 //為方法添加一個事件對象參數(shù)
					//當未輸入用戶名時，提示并阻止提交
					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>

如果想同時阻止事件冒泡和阻止元素默認行為，可以在事件函數(shù)中返回 false 來代替調(diào)用 stopPropagation() 和 preventDefault() 方法。

如：

$(":submit").click(function(event) {	 //為方法添加一個事件對象參數(shù)
	//當未輸入用戶名時，提示并阻止提交
	if ($(":text").val() == "") {	
		$("#msg").text("用戶名不能為空");
		return false;		//阻止提交按鈕的默認行為（提交表單）和事件冒泡
	}
});$("span").click(function(event) {	//為方法添加一個事件對象參數(shù)
	$("#msg").html($("#msg").html() + "<p>內(nèi)層span元素被單擊</p>");
	return false;	//阻止 <span> 的 click 事件冒泡和默認行為（此元素沒有默認行為）
});

以上這篇淺談jQuery 中的事件冒泡和阻止默認行為就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: