确定JavaScript中鼠标指针位于哪个元素之上_Javascript_Dom_Mouse

确定JavaScript中鼠标指针位于哪个元素之上

javascript dom

确定JavaScript中鼠标指针位于哪个元素之上,javascript,dom,mouse,Javascript,Dom,Mouse,我想要一个函数，告诉我鼠标光标在哪个元素上因此，例如，如果用户的鼠标在这个文本区域上（id为wmd input），调用窗口。哪个元素是鼠标上的（）在功能上等同于$（“#wmd input”），您可以在一些合适的祖先上查看mouseover事件的目标： var currentElement = null; document.addEventListener('mouseover', function (e) { currentElement = e.target; }); 有一个非

我想要一个函数，告诉我鼠标光标在哪个元素上

因此，例如，如果用户的鼠标在这个文本区域上（id为

wmd input

），调用

窗口。哪个元素是鼠标上的（）

在功能上等同于

$（“#wmd input”）

，您可以在一些合适的祖先上查看

mouseover

事件的目标：

var currentElement = null;

document.addEventListener('mouseover', function (e) {
    currentElement = e.target;
});

有一个非常酷的函数叫做

document.elementFromPoint

，它的功能听起来像什么

我们需要的是找到鼠标的x和y坐标，然后使用这些值调用鼠标：

var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y);

让我首先说，我不建议使用我将要建议的方法。最好使用事件驱动开发，只将事件绑定到您感兴趣的元素上，以了解鼠标是否在

mouseover

，

mouseout

，

mouseenter

，

mouseleave

，等等

如果您必须能够知道鼠标在哪个元素上，那么您需要编写一个函数，将

mouseover

事件绑定到DOM中的所有内容，然后将当前元素存储在某个变量中

你可以这样做：

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);
    }
}());

基本上，我已经创建了一个即时函数，它在所有元素上设置事件，并在闭包中存储当前元素，以最小化您的占用空间

下面是一个正在运行的演示，它调用

窗口。每秒哪个元素是鼠标所在的元素，并将鼠标当前所在的元素记录到控制台
document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})

鼠标悬停事件气泡，因此您可以在主体上放置一个侦听器，等待它们出现气泡，然后抓取事件.target
或事件.srceElement
：
function getTarget(event) {
    var el = event.target || event.srcElement;
    return el.nodeType == 1? el : el.parentNode;
}

<body onmouseover="doSomething(getTarget(event));">

函数getTarget（事件）{
var el=event.target | | event.src元素；
返回el.nodeType==1？el:el.parentNode；
}
在较新的浏览器中，您可以执行以下操作：
document.querySelectorAll( ":hover" );

这将为您提供一个节点列表，其中列出了鼠标当前在文档顺序上的项目。节点列表中的最后一个元素是最具体的，前面的每个元素都应该是父母、祖父母等等。

<!-- 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. -->

虽然下面的内容可能没有真正回答这个问题，因为这是谷歌搜索的第一个结果（谷歌搜索者可能不会问完全相同的问题：），但希望它能提供一些额外的输入
实际上，有两种不同的方法可以获取鼠标当前所在的所有元素的列表（对于较新的浏览器，可能是）：
“结构化”方法-提升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;
}

函数等位基因自点（x，y）{
var元素，元素=[]；
var old_可见性=[]；
while（true）{
元素=document.elementFromPoint（x，y）；
如果（！element | | element==document.documentElement）{
打破
}
元素。推（元素）；
old_visibility.push（元素、样式、可见性）；
element.style.visibility='hidden'；//临时隐藏元素（不更改布局）
}
对于（var k=0；k

尝试这两种方法，并检查它们的不同返回。
当鼠标移动时，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的解决方案，但不需要jQuery或setInterval。
elementFromPoint（）
只获取DOM树中的第一个元素。这对于开发人员的需求来说是远远不够的。要在当前鼠标指针位置获取多个元素，您需要以下功能：
document.elementsFromPoint(x, y) . // Mind the 's' in elements

这将返回给定点下所有元素对象的数组。
只需将鼠标的X和Y值传递给此函数
详情如下：
对于不受支持的非常旧的浏览器，您可以使用它作为备用。
以下代码将帮助您获取鼠标指针的元素。结果元素将显示在控制台中
document.addEventListener('mousemove', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})

您可以使用此选择器在鼠标下移动对象，然后将其作为jQuery对象进行操作：
$(':hover').last();

对于那些可能仍在挣扎的人，这里有一个解决方案。您希望在要检测的子元素的“父”元素上添加mouseover
事件。下面的代码向您展示了如何进行此操作
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")

wrapper.addEventListener('mousemove', function(e) {
  let elementPointed = document.elementFromPoint(e.clientX, e.clientY)

  console.log(elementPointed)
});

演示：D
在代码段窗口中移动鼠标：D


document.addEventListener（'mouseover'，函数（e）{
console.log（“您在”，e.target.tagName）；
});
@TikhonJelvis:从我的经验来看，IE和firefox都支持它。如果你得到了那两个，你通常会得到全部。令人惊叹的。有没有办法在不捕捉事件的情况下获得鼠标的坐标？（我想可能不是）。如果这是不可能的，那么不幸的是，我不认为这种方法比event.target
或whatever@HoraceLoeb如果不捕获事件，则无法获取鼠标坐标。请参阅进一步解释，这是一种奇怪的方式。如果你赶上了一个活动，为什么