在点击坐标附近找到最接近的元素

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。

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

然而，我在遍历跨度以检测哪个跨度最靠近 div 内单击坐标时遇到了一些困难。

点击处理程序：

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

- TGH

---

不，没有简单的方法可以做到这一点，您必须为每次点击检查页面上每个元素的位置。 - adeneo

并非每个元素都需要添加点击处理程序。他可以将点击处理程序添加到文档本身，然后仅需检查点击事件来源元素的子元素即可。 - ThiefMaster

有趣的问题。是的，使用jQuery的each函数遍历被点击元素的子元素，并计算每个子元素的距离可能是解决问题的方法。 - Dave

Answer 1

这里有一些关于document.elementFromPoint可能有用的链接：

从MDN链接的摘要中可以看到：

返回文档中被调用elementFromPoint方法的元素，该元素是位于给定点下方的最顶层元素。要获取元素，请使用相对于包含文档的窗口或框架中最左上角的点的CSS像素坐标指定点。

http://www.quirksmode.org/dom/w3c_cssom.html

https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint

简而言之，它会在 z-index 堆栈上将一个图钉落在 x、y 坐标上，并返回它所命中的第一个元素。非常有用，尽管根据 Quirksmode 页面的说法，它的支持受到限制。

- Alex Mcp