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

可以说我在一个持有人div中有3个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。我知道我可以将click事件传递到.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/