阻止上层div触发点击事件，并触发下层div的点击事件

最新推荐文章于 2024-04-10 17:32:27 发布

原创最新推荐文章于 2024-04-10 17:32:27 发布 · 6.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #html5

前端专栏收录该内容

14 篇文章

订阅专栏

本文探讨了CSS3中的pointer-events属性如何用于阻止元素上的鼠标事件，即使该元素位于其他元素之上。通过实例展示了如何使用pointer-events:none来确保底层元素的点击事件能够被触发，这对于复杂的UI布局尤其有用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div onclick="aa(1);" 
			style="width: 200px;height: 200px;border: 1px solid blue;"></div>
		
		<div onclick="aa(2);" 
			style="width: 120px;height: 120px;top: 0px;position: absolute;border: 1px solid red;z-index: 111;pointer-events: none;"></div>
		
	</body>
	<script type="text/javascript">
		
		function aa(num){
			alert(num);
		}
		
	</script>
</html>