javascript 同zindex的重叠div如何处理事件关系

最新推荐文章于 2021-06-10 16:01:39 发布

原创最新推荐文章于 2021-06-10 16:01:39 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #ViewUI

javascript 专栏收录该内容

46 篇文章

订阅专栏

本文探讨了在三个相互重叠的div元素中实现点击事件监听的方法。通过调整z-index属性来控制显示层级，并介绍了一种使底层div也能响应点击事件的技术方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个页面中有3个独立的div，不存在嵌套层次关系。3个div互有重叠，如何控制监听事件的层次关系。比如div2盖住部分div1.点击重叠部分如何让div1监听到？
测试代码：


<html>
	<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	</script>
	<style>
		div{
			width:200px;
			height:200px;
			position: absolute;
		}
		#rec1{
			background-color: yellow;
			opacity:0.7;
			background-color: transparent none;
			z-index: 1;
		}
		#rec2{
			background-color: red;
			opacity:0.7;
			left:100px;
			z-index: 2;
		}
		#rec3{
			background-color: blue;
			opacity:0.7;
			left:200px;
			z-index: 3;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			var rec1 = document.getElementById("rec1");
			var rec2 = document.getElementById("rec2");
			var rec3 = document.getElementById("rec3");
			rec1.addEventListener("click",function(event){
				console.log(event);
				event.stopPropagation;
				event.preventDefault();

				console.log("rec1");
			},false);
			rec2.addEventListener("click",function(event){
				console.log(event);
				event.stopPropagation;
				event.preventDefault();
				console.log("rec2");
			},false);
			rec3.addEventListener("click",function(event){
				console.log(event);
				event.stopPropagation;
				event.preventDefault();

				console.log("rec3");
			},false);

		})
	</script>
	<body>
		<div id="rec1"></div>
		<div id="rec2"></div>
		<div id="rec3"></div>
	</body>
</html>

我的解决方案：
若监听的是rec1，则给rec1添加一个rec1Wrapper，z-index为最高，rec1Wrapper监听click事件并触发rec1的点击事件。


rec1Wrapper.addEventListener("click",function(event){
				$("#rec1").trigger("click");
			},false);

<div id="rec1Wrapper"></div>
#rec1Wrapper {
			z-index:99;
		}