淺談jQuery 中的事件冒泡和阻止默認(rèn)行為

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

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

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>

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

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

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

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

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

2、阻止默認(rèn)行為

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

當(dāng)用戶(hù)未填寫(xiě)用戶(hù)名時(shí)，阻止表單提交：

<%@ 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) {	 //為方法添加一個(gè)事件對(duì)象參數(shù)
					//當(dāng)未輸入用戶(hù)名時(shí)，提示并阻止提交
					if ($(":text").val() == "") {	
						$("#msg").text("用戶(hù)名不能為空");
						event.preventDefault();		//阻止提交按鈕的默認(rèn)行為（提交表單）
					}
				});
			});
		</script> 	
 	</head>
 
 	<!-- HTML -->
 	<body>
 		<form action="register.action">
 			用戶(hù)名<input type="text" name="id" />
 			<input type="submit" value="注冊(cè)" />
 			<div id="msg"></div>
 		</form>
 	</body>
</html>

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

如：

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

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

您可能感興趣的文章: