浅谈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 相关文章推荐
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
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
农民C键的运用技巧
2020/03/04 星际争霸
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
JavaScript日历实现代码
2010/09/12 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
公司薪酬管理制度
2014/01/31 职场文书
大学秋游活动方案
2014/02/11 职场文书
微笑服务演讲稿
2014/05/13 职场文书
七年级地理教学计划
2015/01/22 职场文书
小学运动会宣传稿
2015/07/23 职场文书