在一个页面中有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;
}
分享到：
相关推荐
这个功能主要通过JavaScript事件处理和CSS定位来实现。 首先，描述中提到的“按一定规则重叠在一起”的层，这里涉及到CSS的`position`属性，通常是设置为`absolute`，以便层可以相对于其最近的非静态定位祖先元素...
在前端开发中，"图片重叠 点击互相切换"是一种...综上所述，实现"图片重叠 点击互相切换"的效果需要综合运用HTML、CSS和JavaScript，结合前端库如jQuery，通过合理的布局和事件处理，营造出富有交互性的图片展示体验。
4. **避免重叠问题：** 如果`div`和`select`有相同的`z-index`，并且`div`的`position`是`fixed`，`div`可能仍然会在`select`下方。为了解决这个问题，可以尝试将`select`的`position`设置为`relative`或`absolute`...
例如，对于一个拥有特定id的div元素，可以通过以下JavaScript代码改变其Z-INDEX: ```javascript var element = document.getElementById('elementId'); // 获取DOM元素 element.style.zIndex = '新的Z-INDEX值'; //...
例如，假设我们有三个重叠的图片层，每个层都有一个对应的`div`元素，我们可以设定初始状态下最上面的层的`z-index`值最高。当用户触发滑动事件时，`.animate()`方法将调整该层的`z-index`，同时降低前一层次的`z-...
- **zIndex**：菜单的层叠顺序，用于控制多个菜单重叠时的显示优先级。 - **left**和**top**：菜单相对于容器的水平和垂直偏移量。 - **minWidth**：菜单的最小宽度，防止收缩过小。 - **hideOnUnhover**：当...
4. **事件处理**：Dialog 支持多种事件，如打开（open）、关闭（close）、拖动开始（dragstart）和拖动结束（dragstop）等，便于进行更复杂的交互逻辑控制。 5. **位置控制**：可以设置 Dialog 的初始位置，也可以...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。在电商网站或产品展示页面中，图片无缝滚动是一种常见的视觉设计手法，它能够吸引用户的注意力，提升用户体验。本文将深入讲解如何...
此外，通过设置`zIndex`属性，可以确保弹出层总是位于页面的最上层，避免与其他元素重叠。 #### 4. 遮罩层的实现 为了增强用户体验，代码中还包含了创建遮罩层的逻辑。遮罩层通常是一个半透明的黑色背景，用于模糊...
这不仅包括了对鼠标事件的监听和处理，也涵盖了对页面元素的坐标计算和样式调整。通过对碰撞前后不同视觉状态的模拟，本文为需要在网页中实现基本图形交互功能的开发者提供了一种实现思路和代码参考。