浅谈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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript实现完美拖拽效果
May 06 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
python中的列表推导浅析
2014/04/26 Python
Python 26进制计算实现方法
2015/05/28 Python
Python之父谈Python的未来形式
2016/07/01 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Python同时迭代多个序列的方法
2020/07/28 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
期末学生评语大全
2014/04/24 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers