用jquery确定点击下的所有元素答案

【问题标题】：Determining all elements under a click with jquery用jquery确定点击下的所有元素
【发布时间】：2018-04-11 17:56:57
【问题描述】：

假设我有 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/

【问题讨论】：

标签： jquery events dom click

【解决方案1】：

要实现这一点，您可以使用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 中受支持。不过，它在现代浏览器中得到了全面支持。

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：