浅谈jQuery 中的事件冒泡和阻止默认行为

2019-11-20 09:52:17

字体：大中小

来源：转载

供稿：网友

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 事件冒泡和默认行为（此元素没有默认行为）});

以上这篇浅谈jQuery 中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：前端学习笔记style，currentStyle，getComputedStyle的用法与区别

下一篇：jquery取消事件冒泡的三种方法(推荐)