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中元素的集合，该元素在该点占用空间。您只需从事件处理程序中获取鼠标单击的坐标，如下所示：

＆＃13;

$(document).ready(function() {
  $(document).click(function(e) {
    var elements = document.elementsFromPoint(e.clientX, e.clientY);
    console.log(elements);
  })
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这里需要注意的是，此方法仅在＆gt; IE10中受支持。不过，它在现代浏览器中得到了全面的支持。

Answer 2

试试这个：

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

使用jquery

2 个答案: