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

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 访问顶部/左侧；

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

点击处理程序：

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

score 2 · Accepted Answer

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

从 MDN 链接的摘要中：

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

所以简而言之，它在 z-index 堆栈的某个坐标处放下一个 pin x, y，并返回它命中的第一个元素。超级有用，尽管根据 Quirksmode 页面，它的支持是有限的。

1 回答 1