jQuery 事件冒泡

最新推荐文章于 2024-07-25 08:06:37 发布

shuair

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量320

点赞数

本文链接：https://blog.csdn.net/shuair/article/details/70159117

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		<title></title>
		<script>
			$(function(){
				var count = 0 ;
				$("div,p,input").on("click",function(){
					alert(count++) ;
				}) ;
			}) ;  
		</script>
	</head>
	<body> 
		<div><p><input type="button" value="按钮"/></p></div> 
	</body>
</html>

这样就会产生事件冒泡。会连续三个弹窗。

阻止事件冒泡

event.stopPropagation() ;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		<title></title>
		<script>
			$(function(){
				var count = 0 ;
				$("div,p,input").on("click",function(){
					alert(count++) ;
					event.stopPropagation() ;
				}) ;
			}) ;  
		</script>
	</head>
	<body> 
		<div><p><input type="button" value="按钮"/></p></div> 
	</body>
</html>

阻止了冒泡。只会产生一个弹窗。

shuair

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 事件冒泡

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <link rel="stylesheet" href...
复制链接

扫一扫