有没有一种方法可以从位置（x，y坐标）找到div名称？

Question

当你知道div名称时，找到它的位置相当容易。但是如果我只知道屏幕上的X/Y坐标，有没有一种简单的方法来获取div id呢？

在名为#HarbourRadar的面板（另一个div）上，范围在#Items1到#Items50的div之间不会重叠。每个#Items div中可能有多个堆叠的图像。

无论如何，任何提示都将非常感激，以便从位置找到div。

以下代码（取自下面答案中的代码）获取了div＃HarbourRadar的id，这部分是正确的，因为div＃marker放置在其上方，但是它不会返回所选的带有更高Z-Index的div＃marker。

var pos = $("#marker").position();
alert(document.elementFromPoint(pos.left, pos.top).id);

- Marker

---

你为什么想要通过坐标来查找它？你如何获取这些坐标？ - Lars Nyström

不太确定这是否有效，但您是否尝试在body标签上添加一个点击处理程序，然后检查'target'属性以查看它是否给出了原始来源？ - vansimke

@Lars，我正在开发一个基于网格的板子，所以我对X、Y坐标非常了解。例如，从标记获取位置将像这样：var pos = $("#marker").position(); alert('X坐标：' + pos.posX); - Marker

可能是重复的问题：如何找到给定（X，Y）位置处的DOM节点？（命中测试），以及https://dev59.com/F0XRa4cB1Zd3GeqPoxek和可能也包括https://dev59.com/iEnSa4cB1Zd3GeqPOX_P。 - Felix Kling

Answer 1

是的，可以使用document.elementFromPoint方法来实现。
这是Microsoft的文档说明。 这是Mozilla文档。
正如您在此浏览器比较中看到的那样，该函数几乎完全兼容。

以下是MDN文档中的示例代码：

function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}

<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>

- Tomáš Zato

---

很棒的答案，我以前从未听说过 :) - Rory McCrossan

当我第一次看到它时，我也感到疑惑。但我仍然怀疑这个东西的兼容性。 - Tomáš Zato

还要看这里http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/ - dfsq

@TomášZato 我也是，所以我查看了一下：http://www.quirksmode.org/dom/w3c_cssom.html。除旧版 WinSafari 和旧版 Opera 之外，它在所有浏览器中都有支持。 - Rory McCrossan

同样在这里，http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html 因此elementFromPoint()现在真正可用。 - Rory McCrossan

Answer 2

请参考以下现有的StackOverflow讨论，这可能会对您有所帮助：

确定JavaScript中鼠标指针位于哪个元素上

这是使用JavaScript函数document.elementFromPoint，并且有一个演示示例，可以展示一个工作示例。

jsFiddle网址为：http://jsfiddle.net/MPTTp/

来自fiddle的代码：

$(window).click(function(e) {
    var x = e.clientX, y = e.clientY,
        elementMouseIsOver = document.elementFromPoint(x, y);

    alert(elementMouseIsOver);
});

- dalethestirling