Web开发基础_JQuery学习_0005_jQuery冒泡机制

最新推荐文章于 2025-05-19 15:14:23 发布

原创最新推荐文章于 2025-05-19 15:14:23 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

jQuery事件冒泡机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>冒泡机制</title>
		<style type="text/css">
			div {
				width:300px;
				padding:30px;
				border:1px solid red;
			}
			
			p {
				width:200px;
				padding:20px;
				border:1px solid red;
			}
			
			span {
				border:1px solid red;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			//onload
			$(function(){
				$("div").click(function(e){
					alert("div");
					//获取事件源
					console.log(e.target);
				});
				
				$("p").click(function(){
					alert("p");
				});
				
				$("span").click(function(e){
					alert("span");
					//取消冒泡
					e.stopPropagation();
				});
			});
		</script>
	</head>
	<body>
		<div>
			<p>
				<span>xxx</span>
			</p>
		</div>
	
	</body>
</html>

最终页面显示效果：