浅谈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 select下拉框操作常用方法
Nov 09 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
canvas绘制环形进度条
Feb 23 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
php中如何执行linux命令详解
2018/11/06 PHP
PHP7修改的函数
2021/03/09 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
js数组去重的hash方法
2016/12/22 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
Python中的ConfigParser模块使用详解
2015/05/04 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
python多线程和多进程关系详解
2020/12/14 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
总结Python变量的相关知识
2021/06/28 Python