确定鼠标指针位于Javascript的哪一个元素
我想要一个函数来告诉我鼠标光标结束的元素。
因此，例如，如果用户的鼠标hover在这个textarea（id为wmd-input ）上，调用window.which_element_is_the_mouse_on()将在function上等价于$("#wmd-input")
DEMO
有一个非常酷的function叫做document.elementFromPoint ，它听起来像。
我们需要的是find鼠标的x和y坐标，然后使用这些值来调用它：
var x = event.clientX, y = event.clientY, elementMouseIsOver = document.elementFromPoint(x, y);
document.elementFromPoint
jQuery事件对象
在较新的浏览器中，您可以执行以下操作：
document.querySelectorAll( ":hover" );
这会给你一个鼠标当前以文档顺序结束的项目的NodeList。 NodeList中的最后一个元素是最具体的，每个前面的元素应该是父，祖父母等等。
虽然下面可能不会真正回答这个问题，因为这是Google的第一个结果（Google员工可能不会问完全相同的问题:)，希望它会提供一些额外的input。
实际上有两种不同的方法来获取鼠标当前所有元素的列表（也许对于较新的浏览器）：
“结构”方法 – 升序DOM树
正如德尔曼的回答，可以打电话
var elements = document.querySelectorAll(':hover');
但是，这里假设只有孩子会覆盖他们的祖先，通常是这样，但是通常情况并非如此，特别是在处理DOM树的不同分支中的元素可能相互重叠的SVG时。
“视觉”方法 – 基于“视觉”重叠
这个方法使用document.elementFromPoint(x, y)来查找最顶层的元素，暂时隐藏它（因为我们立即在相同的上下文中恢复它，浏览器实际上不会呈现这个），然后继续find第二个最顶层的元素。 ..看起来有点乱七八糟，但是当它出现时，它会返回你期望的结果，例如树中的兄弟元素相互闭塞。 请find这个职位的更多细节，
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; }
尝试两种，并检查他们不同的回报。
Mouseover事件冒泡，所以你可以把一个监听器放在主体上，等待它们冒泡，然后抓住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));">
一个可能的解决scheme可能是绑定一个事件处理程序的一切 ：
var currentElement = null; $('body, body *').bind('mouseover', function(e) { // You might need to use .on(), too. if(e.target === e.currentTarget) { currentElement = $(this); } });
如果页面上的元素过多，这可能不是最好的主意。 这里是一个演示。
<!-- One simple solution to your problem could be like this: --> <div> <input type="text" id="fname" onmousemove="javascript: alert(this.id);" /> <!-- OR --> <input type="text" id="fname" onclick="javascript: alert(this.id);" /> </div> <!-- Both mousemove over the field & click on the field displays "fname"--> <!-- Works fantastic in IE, FireFox, Chrome, Opera. --> <!-- I didn't test it for Safari. -->
你可以使用这个select器来embedded对象，而不是把它作为jquery对象来操作。 $(':hover').last();
mousemove DOM事件的目标是鼠标移动时光标下最顶端的DOM元素：
(function(){ //Don't fire multiple times in a row for the same element var prevTarget=null; document.addEventListener('mousemove', function(e) { //This will be the top-most DOM element under cursor var target=e.target; if(target!==prevTarget){ console.log(target); prevTarget=target; } }); })();
这与@Philip Walton的解决scheme类似，但不需要jQuery或setInterval。
以下代码将帮助您获取鼠标指针的元素。 结果元素将显示在控制台中。
document.addEventListener('mousemove', function(e) { console.log(document.elementFromPoint(e.pageX, e.pageY)); })
elementFromPoint()获取DOM树中的第一个元素。 这对于开发人员的需求来说是不够的。 所以这个function很好：
Document.elementsFromPoint()
这将返回给定点下的元素对象数组。
这是目前所有浏览器都不支持的实验性function，因此您可以使用此答案作为回退
| Chrome | Firefox | IE | Opera | Safari | 43.0 | 46.0 | 10.0 | ? | No support
更多信息和当前的浏览器兼容性： https ： //developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
让我开始说，我不build议使用我即将build议的方法。 使用事件驱动开发并且仅将事件绑定到感兴趣的元素上，使用mouseover ， mouseout ， mouseenter ， mouseleave等来知道鼠标是否结束，会mouseleave 。
如果你绝对必须有能力知道鼠标结束了哪一个元素，你需要编写一个函数，把mouseover事件绑定到DOM中的所有东西上，然后存储当前元素在某个variables中的内容。
你可能是这样的东西：
window.which_element_is_the_mouse_on = (function() { var currentElement; $("body *").on('mouseover', function(e) { if(e.target === e.currentTarget) { currentElement = this; } }); return function() { console.log(currentElement); } }());
基本上，我创build了一个立即函数，它在所有元素上设置事件，并将当前元素存储在闭包中以最小化脚印。
这是一个每秒钟调用window.which_element_is_the_mouse_on的工作演示，并将鼠标当前的元素logging到控制台。
