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页面，它的支持是有限的。