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

Question

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

Answer 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 中受支持。不过，它在现代浏览器中得到了完全支持。