确定鼠标指针在Javascript顶部的哪个元素

Question

我想要一个函数，该函数告诉我鼠标光标位于哪个元素上。

因此，例如，如果用户的鼠标位于该文本区域（ID为wmd-input）上，则调用window.which_element_is_the_mouse_on()在功能上等同于$("#wmd-input")

Answer 1

有一个很酷的功能document.elementFromPoint，它听起来像什么。我们需要找到鼠标的x和y坐标，然后使用这些值调用它：var x = event.clientX, y = event.clientY,    elementMouseIsOver = document.elementFromPoint(x, y);document.elementFromPoint

Answer 2

在较新的浏览器中，您可以执行以下操作：document.querySelectorAll( ":hover" );这将给您一个NodeList项，以鼠标顺序显示当前鼠标在文档上的位置。NodeList中的最后一个元素是最具体的，前面的每个元素都应该是父级，祖父母级，依此类推。

Answer 3

尽管以下内容可能并未真正回答该问题，希望它会提供一些额外的输入。实际上，有两种方法可以获取鼠标当前所经过的所有元素的列表（也许对于较新的浏览器而言）：“结构”方法-升序DOM树就像德曼的回答一样，var elements = document.querySelectorAll(':hover');但是，这假设只有子代会覆盖其祖先，通常是这种情况，但通常情况并非如此，尤其是在处理SVG时，DOM树的不同分支中的元素可能会相互重叠。“视觉”方法-基于“视觉”重叠此方法用于document.elementFromPoint(x, y)查找最顶层的元素，暂时将其隐藏（由于我们在相同的上下文中立即对其进行了恢复，因此浏览器将不会实际呈现该元素），然后继续查找第二个最顶层的元素...看起来有些跷，但是它返回您期望的结果，例如，树中的兄弟姐妹元素相互遮挡。请找到此帖子以获取更多详细信息，function allElementsFromPoint(x, y) {    var element, elements = [];    var old_visibility = [];    while (true) {        element = document.elementFromPoint(x, y);        if (!element || element === document.documentElement) {            break;        }        elements.push(element);        old_visibility.push(element.style.visibility);        element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)    }    for (var k = 0; k < elements.length; k++) {        elements[k].style.visibility = old_visibility[k];    }    elements.reverse();    return elements;}尝试两者，并检查它们的不同收益。