jQuery事件冒泡

最新推荐文章于 2024-08-17 15:56:45 发布

夏至青柠

最新推荐文章于 2024-08-17 15:56:45 发布

阅读量653

点赞数 2

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qibulemingzi/article/details/107563993

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery事件冒泡

在这里插入图片描述

一、什么是事件冒泡

冒泡事件就是点击子节点，会向上触发父节点、祖先节点的点击事件。
eg：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.grandfather{
				width: 500px;
				height: 500px;
				background-color: #CCFFCC;
			}
			.father{
				width: 300px;
				height: 300px;
				background-color: #99CCCC;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: #FFFFCC;
			}
		</style>
		<script type="text/javascript">
			$(function(){
			    var $box1 = $('.grandfather');
			    var $box2 = $('.father');
			    var $box3 = $('.son');
			    $box1.click(function() {
			        alert('grandfather');
			    });
			    $box2.click(function() {
			        alert('father');
			    });
			    $box3.click(function() {
			        alert('son');
			    });
			})
		</script>
	</head>
	<body>
		<div class="grandfather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>

二、阻止事件冒泡

外层包裹内层的两个元素都被添加事件，此时只想触发一个事件，就需要将另外一个事件进行阻止，这就是阻止事件冒泡。

将上面示例进行修改，点击哪一个div只触发此div
event.stopPropagation(); // 阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.grandfather{
				width: 500px;
				height: 500px;
				background-color: #CCFFCC;
			}
			.father{
				width: 300px;
				height: 300px;
				background-color: #99CCCC;
			}
			.son{
				width: 100px;
				height: 100px;
				background-color: #FFFFCC;
			}
		</style>
		<script type="text/javascript">
			$(function(){
			    var $box1 = $('.grandfather');
			    var $box2 = $('.father');
			    var $box3 = $('.son');
			    $box1.click(function(event) {
			        alert('grandfather');
					event.stopPropagation();
			    });
			    $box2.click(function(event) {
			        alert('father');
					event.stopPropagation();
			    });
			    $box3.click(function(event) {
			        alert('son');
					event.stopPropagation();
			    });
			})
		</script>
	</head>
	<body>
		<div class="grandfather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
event.preventDefault(); // 阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.father{
				width: 500px;
				height: 500px;
				background-color: red;
			}
			.son{
				width: 300px;
				height: 300px;
				background-color: purple;
			}
			.grandson{
				width: 100px;
				height: 100px;
				background-color: orange;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$('#form').submit(function(event){
					event.preventDefault();
				})
			})
		</script>
	</head>
	<body>
		<form action="" method="post" id="form">
			<input type="password" name="" />
			<br>
			<input type="submit" value="点击"/>
		</form>
	</body>
</html>

还有一种防止默认行为的方法就是return false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.father{
				width: 500px;
				height: 500px;
				background-color: red;
			}
			.son{
				width: 300px;
				height: 300px;
				background-color: purple;
			}
			.grandson{
				width: 100px;
				height: 100px;
				background-color: orange;
			}
		</style>
		<script type="text/javascript">
			$(function(){
			     var $box1 = $('.father');
			    var $box2 = $('.son');
			    var $box3 = $('.grandson');
			    $box1.click(function() {
			        alert('father');
			    });
				// 阻止 事件冒泡  event.stopPropagation()
			    $box2.click(function(event) {
			        alert('son');
					return false;
			    });
			    $box3.click(function(event) {
			        alert('grandson');
			    });
			    $(document).click(function(event) {
			        alert('grandfather');
			    }); 
				// 阻止默认行为
				// preventDefault() 这个方法 是通过事件 对象 调用    event
				$('#form').submit(function(event){
					//event.preventDefault();
					return false; //  阻止默认
				})
			})
		</script>
	</head>
	<body>
		<div class="father">
		    <div class="son">
		        <div class="grandson"></div>
		    </div>
		</div>
		
		<form action="" method="post" id="form">
			<input type="password" name="" />
			<br>
			<input type="submit" value="点击"/>
		</form>
	</body>
</html>

总结：
在这里插入图片描述