假设我有 3 个 div,位于一个支架 div 内:
<div class='holder'>
<div id='back'></div>
<div id='middle'></div>
<div id='front'></div>
</div>
这三个div(#back
、#middle
和#front
)都是绝对定位的,有z-index设置来堆叠它们适本地,并且有不同程度的重叠。例如CSS:
div.holder {
position: relative;
width: 400px;
height: 400px;
}
div.holder > div {
position: absolute;
width: 150px;
height: 150px;
opacity: 0.25;
}
#back {
top: 0px
left: 0px;
z-index: 1;
background-color: #990000;
}
#middle {
top: 100px;
left: 100px;
z-index: 2;
background-color: #009900;
}
#front {
top: 50px;
left: 50px;
z-index: 3;
background-color: #000099;
}
我想让#front
可点击(例如使用:$('#front').click()
),但是当点击时,我想得到一个单击正下方的元素列表。在上面的示例中,#front 中心有一个 50px x 50px 的区域,这将产生 #back
、#middle
和 .holder
。我知道我可以将点击事件传递给 .holder
,这样就很容易了。但如何确定 #back
和 #middle
是否在点击之下?
我在这里创建了一个jsfiddle:https://jsfiddle.net/hr2m2gck/
最佳答案
要实现此目的,您可以使用elementsFromPoint()
。此方法接受 X 和 Y 坐标并返回 DOM 中在该点占据空间的元素的集合。您可以简单地从事件处理程序中获取鼠标单击的坐标,如下所示:
$(document).ready(function() {
$(document).click(function(e) {
var elements = document.elementsFromPoint(e.clientX, e.clientY);
console.log(elements);
})
});
div.holder {
position: relative;
width: 400px;
height: 400px;
}
div.holder>div {
position: absolute;
width: 150px;
height: 150px;
opacity: 0.25;
}
#back {
top: 0px left: 0px;
z-index: 1;
background-color: #990000;
}
#middle {
top: 100px;
left: 100px;
z-index: 2;
background-color: #009900;
}
#front {
top: 50px;
left: 50px;
z-index: 3;
background-color: #000099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div id="back"></div>
<div id="middle"></div>
<div id="front"></div>
</div>
这里需要注意的是,此方法仅在 >IE10 中受支持。不过,它在现代浏览器中得到了完全支持。
关于jquery - 使用jquery确定点击下的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47020590/