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


Posted in Javascript onMay 28, 2016

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 中的事件冒泡和阻止默认行为就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
jquery取消事件冒泡的三种方法(推荐)
May 28 #Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 #Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 #Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 #Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 #Javascript
jQuery操作动态生成的内容的方法
May 28 #Javascript
javascript 用函数实现继承详解
May 28 #Javascript
You might like
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php创建sprite
2014/02/11 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue生命周期的探索
2019/04/03 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Python实现简单的2048小游戏
2021/03/01 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
酒店优秀员工推荐信
2015/03/24 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA