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

最新推荐文章于 2023-03-07 13:13:40 发布

莫冲

最新推荐文章于 2023-03-07 13:13:40 发布

阅读量889

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mochong/article/details/67636104

本文探讨了当多个DOM元素互相重叠时，如何通过添加额外的DOM元素和使用事件监听器来确保底层元素可以接收到点击事件。提供了一个具体的实现方案，包括HTML结构、CSS样式设置及JavaScript代码。

摘要生成于 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;
		}