使用jquery确定单击下的所有元素

假设我有3个div，在一个holder div中：

<div class='holder'>
  <div id='back'></div>
  <div id='middle'></div>
  <div id='front'></div>
</div>

我想使

#front

可单击（例如，使用：

$（“#front”）.click（）

），但单击后，我想在该单击的正下方获得元素列表。在上面的例子中，在前面的中心有一个50px x 50px的区域，这将产生

#back

，

#middle

，和

.holder

。我知道我可以将单击事件传递到

.holder

，这样做很容易。但是，我如何确定单击下是否有

#back

和

#middle

---

我在这里创建了一个jsfiddle:

要实现这一点，可以使用

elementsFromPoint（）

。此方法接受X和Y坐标，并返回DOM中占用该点空间的元素集合。您只需从事件处理程序获取鼠标单击的坐标，如下所示：

$（文档）.ready（函数（）{
$（文档）。单击（函数（e）{
var elements=document.elementsFromPoint（e.clientX，e.clientY）；
控制台日志（元素）；
})
});
div.holder{
位置：相对位置；
宽度：400px；
高度：400px；
}
div.holder>div{
位置：绝对位置；
宽度：150px；
高度：150像素；
不透明度：0.25；
}
#背{
顶部：0px左侧：0px；
z指数：1；
背景色：#990000；
}
#中间的{
顶部：100px；
左：100px；
z指数：2；
背景色：#009900；
}
#正面{
顶部：50px；
左：50px；
z指数：3；
背景色：#000099；
}

试试这个：

$('#front').click(function(evt) {
    var siblingsAfter = $(evt.target).nextAll();
  });

$('#front').click(function(evt) {
    var siblingsAfter = $(evt.target).nextAll();
  });