确定鼠标指针在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;

}

尝试两者，并检查它们的不同收益。