确定鼠标指针位于JavaScript中哪个元素的顶部
我想要一个能告诉我鼠标光标停留在哪个元素上的函数。
因此，例如，如果用户的鼠标位于这个文本区域上( id为wmd-input)，则调用window.which_element_is_the_mouse_on()在功能上等同于$("#wmd-input")。
回答 9
Stack Overflow用户
发布于 2013-03-07 12:36:37
在较新的浏览器中，您可以执行以下操作：
document.querySelectorAll( ":hover" );这将为您提供一个按文档顺序鼠标当前所在项目的NodeList。NodeList中的最后一个元素是最具体的，前面的每个元素都应该是父元素、祖父母元素等等。
Stack Overflow用户
发布于 2015-01-11 14:40:37
虽然下面可能没有回答这个问题，但由于这是谷歌搜索的第一个结果(谷歌人可能不会问完全相同的问题：)，希望它能提供一些额外的输入。
实际上，有两种不同的方法可以获取鼠标当前所在的所有元素的列表(可能对于较新的浏览器)：
“结构化”方法--升序DOM树
与在dherman's answer中一样，用户可以调用
var elements = document.querySelectorAll(':hover');但是，这假设只有子代将覆盖它们的祖先，这通常是这样的，但通常不是这样的，特别是在处理SVG时，其中DOM树的不同分支中的元素可能彼此重叠。
“视觉”方法--基于“视觉”重叠
这个方法使用document.elementFromPoint(x, y)查找最顶层的元素，暂时隐藏它(因为我们在相同的上下文中立即恢复它，所以浏览器实际上不会呈现它)，然后继续查找第二个最顶层的元素……看起来有点老生常谈，但当树中有兄弟元素相互遮挡时，它会返回您所期望的结果。有关更多详细信息，请访问this post。
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;
}两个都试一试，并检查它们的不同回报。
Stack Overflow用户
发布于 2015-08-19 23:48:01
下面的代码将帮助您获取鼠标指针的元素。生成的元素将显示在控制台中。
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})https://stackoverflow.com/questions/8813051
复制相似问题