鼠标悬停时获取任何标签的ID答案

【问题标题】：Getting id of any tag when mouseover鼠标悬停时获取任何标签的ID
【发布时间】：2011-02-11 23:56:23
【问题描述】：

有谁知道鼠标悬停时如何获取任何元素的 id 吗？

我想在鼠标所在的元素（标签）上显示一个 div（框）。我无法修改标签以包含鼠标悬停事件。我想要一个全局回调或类似的东西来获得鼠标指针下的标签的 id。

谢谢！

【问题讨论】：

您可能不关心被悬停的元素的 ID。如果您已经到了可以获取元素 ID 的地步，您可能只想访问元素本身
你是完全正确的加雷斯。任何对鼠标悬停事件的回调都可以访问该元素。我如何做到这一点？

标签： javascript dom html

【解决方案1】：

你的意思是你想要onmouseover事件的target，所以你可以访问元素的属性：

<script>
document.onmouseover = function(e) {
    console.log(e.target.id);
}
</script>

查看Event Properties获取目标的跨浏览器方式（以下示例来自上述网站）：

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

所以把它们放在一起：

document.onmouseover = function(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    console.log(targ.id);
}

【讨论】：

哇！好像是这个！ console.log 是我一直在寻找的功能。让我试试看：）谢谢！！！

【解决方案2】：

可能不是您想要的。但是如果你使用 Firefox 的 web 开发者工具，你可以选择 Information -> Display id and class details。这将显示页面上每个元素的 ID 和类信息。同样使用 CSS -> 查看样式信息将允许您将鼠标悬停在元素上，并在悬停在元素上时单独显示它们的类和 id 层次结构。我只提供此解决方案是因为我假设您不希望用户可以使用该功能，而是希望将其作为调试网站的工具。

【讨论】：

感谢您的回答 Kibbee，但我确实想向用户提供此功能。 firebug 扩展在检查元素时正是这样做的，但我需要能够在没有扩展的情况下做到这一点。谢谢。

【解决方案3】：

试试这个

function Test(e) {
    alert(e.id);
}

<div id="newww" class="editor2 draggable1" style="position:absolute;top:100px;left:100px;border: 1px solid #aaaaaa;" onmouseover="Test(this)">
</div>

【讨论】：