Jquery中的冒泡和阻止默认行为

最新推荐文章于 2022-10-07 21:15:34 发布

爱郑强丽

最新推荐文章于 2022-10-07 21:15:34 发布

阅读量130

点赞数

分类专栏： JQuery 文章标签： JQuery冒泡

本文链接：https://blog.csdn.net/ZhiAi_ZhengLiLi/article/details/100025141

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>冒泡</title>
	<script src="jquery-1.8.3.min.js"></script>
	<style>
		.box1{
			width:600px;
			height:600px;
			border:1px solid black;
			border-radius:100%; 
		}
		.box2{
			width:500px;
			height:500px;
			margin:50px auto;
			border:1px solid black;
			border-radius:100%; 
		}
		.box3{
			width:400px;
			height:400px;
			margin:50px auto;
			border:1px solid black;
			border-radius:100%; 
		}
		.box4{
			width:300px;
			height:300px;
			margin:50px auto;
			border:1px solid black;
			border-radius:100%; 
		}
		.box5{
			width:200px;
			height:200px;
			margin:50px auto;
			border:1px solid black;
			border-radius:100%; 
		}
		.box6{
			width:100px;
			height:100px;
			margin:50px auto;
			border:1px solid black;
			border-radius:100%; 
		}


	</style>
</head>
<body>
	<div class='box1'>
		<div class='box2'>
			<div class='box3'>
				<div class='box4'>
					<div class='box5'>
					<div class='box6'></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<a href='http://www.baidu.com'>去百度</a>
<script>
	$('.box1').click(function(){
		$(this).css('background','yellow')
		})
	$('.box2').click(function(){
		$(this).css('background','pink');
		return false;
		})
		
	$('.box3').click(function(){
		$(this).css('background','purple');
		return false;
		})
		
	$('.box4').click(function(){
		$(this).css('background','blue');
		return false;
		})
		
	$('.box5').click(function(){
		$(this).css('background','gold');
		return false;
		})
		
	$('.box6').click(function(){
		$(this).css('background','red');
		return false;
		})
	$('a').click(function(){
		alert('ok');
		return false
		// return false 阻止默认行为
	})

</script>
</body>
</html>

爱郑强丽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery中的冒泡和阻止默认行为

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>冒泡</title> <script src="jquery-1.8.3.min.js"></script> <style> .box1{...
复制链接

扫一扫