确定鼠标指针位于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议的方法。 使用事件驱动开发并且仅将事件绑定到感兴趣的元素上,使用mouseovermouseoutmouseentermouseleave等来知道鼠标是否结束,会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到控制台。

http://jsfiddle.net/LWFpJ/1/