Tom*_*man 95 javascript mouse dom
我想要一个函数,告诉我鼠标光标在哪个元素上.
因此,例如,如果用户的鼠标位于此textarea(带有id wmd-input)上,则调用window.which_element_is_the_mouse_on()将在功能上等效于$("#wmd-input")
qwe*_*ymk 133
有一个非常酷的功能叫做document.elementFromPoint听起来像.
我们需要的是找到鼠标的x和y坐标,然后使用这些值调用它:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
dhe*_*man 58
在较新的浏览器中,您可以执行以下操作:
document.querySelectorAll( ":hover" );
这将为您提供鼠标当前按文档顺序排列的项目的NodeList.NodeList中的最后一个元素是最具体的,每个前面的元素应该是父元素,祖父母元素,等等.
her*_*h10 44
虽然以下可能实际上没有回答这个问题,因为这是谷歌搜索的第一个结果(谷歌搜索者可能不会问完全相同的问题:),希望它能提供一些额外的输入.
实际上有两种不同的方法来获取鼠标当前所有元素的列表(对于较新的浏览器,可能):
正如在dherman的回答中,人们可以打电话
var elements = document.querySelectorAll(':hover');
然而,这假设只有孩子将覆盖他们的祖先,这通常是这种情况,但通常不是这样,特别是在处理SVG时,DOM树的不同分支中的元素可能彼此重叠.
这个方法用来document.elementFromPoint(x, y)找到最顶层的元素,暂时隐藏它(因为我们在同一个上下文中立即恢复它,浏览器实际上不会渲染它),然后继续找到第二个最顶层的元素......看起来有点hacky,但是它返回你所期望的,例如,树中的兄弟元素彼此遮挡.请查看此帖子了解更多详情,
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;
}
尝试两者,并检查他们的不同回报.
Kar*_*ler 11
elementFromPoint()只获取DOM树中的第一个元素.这对于开发人员的需求来说大多不够.因此有这个很好的功能:
document.elementsFromPoint(x, y) . // mind the 's'
这将返回给定点下的所有元素对象的数组.
对于不支持此版本的旧浏览器,您可以将此答案用作后备
有关旧浏览器兼容性的更多信息,请访问:https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
鼠标悬停事件会冒泡,因此您可以在主体上放置一个侦听器并等待它们冒泡,然后抓住event.target或event.srcElement:
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">
您可以mouseover在一些合适的祖先上查看事件的目标：
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});
小智 5
以下代码将帮助您获取鼠标指针的元素。结果元素将显示在控制台中。
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})
在代码片段窗口中移动鼠标：D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ", e.target.tagName);
});
</script>| 归档时间： |
|
| 查看次数： |
88795 次 |
| 最近记录： |