查找最接近点击坐标的元素

Question

有没有一种简单的方法来检测最接近的子元素到容器中鼠标点击的坐标？ 在这种情况下，容器是div

例如：

<div style="white-space: pre-wrap">
  <span>E1</span>
  <span>\n</span>
  <span>\n</span>
  <span>E4</span>
  <span>E5</span>
</div>

在上面的例子中，我想确定具有最接近的顶部/左侧坐标的跨度，以及在div中发生咔嗒声的位置。 由于换行，跨度不完全覆盖div

在我的点击事件中，我可以通过e.clientY访问top / left;

但是，我在遍历跨度时遇到一些困难，无法检测哪个跨度最接近div内部点击的坐标。

点击处理程序

function(e){
 var yop = e.clientY;
}

Answer 1

以下是一些可能对document.elementFromPoint有用的链接：

从MDN链接摘要：

返回正在调用elementFromPoint方法的文档中的元素，该元素位于给定点下面的最顶层元素。 要获取元素，请通过坐标（以CSS像素为单位）指定相对于包含文档的窗口或框架中最左上角点的点。

简而言之，它在x, y坐标处将z-index堆栈中的引脚向下移动，并返回它命中的第一个元素。 超级有用，但根据Quirksmode页面，它的支持是有限的。