JavaScript：当鼠标悬停时获取 DOM 树中的元素

Question

JavaScript：当鼠标悬停时获取 DOM 树中的元素

4

使用时：

document.onmouseover = function(e) {}

有没有一种属性可以让我获取 DOM 树中的元素呢？

例如，我可以给 e.srcElement 设置样式，但是我之后如何访问该元素（例如重置其样式）？并且我如何知道它在 DOM 树中的位置？我希望能够在整个页面转储中定位它。

非常感谢。

为了解决以后重新访问该元素的问题，我尝试了以下方法，但并不起作用：

var lastelem;

document.onmouseover = function(e) {

  if (lastelem != null){
    lastelem.style.border = "0px";
  }

  if (e===undefined) e= window.event;
  var target= 'target' in event? event.target : event.srcElement;
  document.getElementById('display').value = target.tagName;
  target.style.border = "1px";
  lastelem = target;
};

谢谢

- oimoim

4

这是一个普通的DOM元素。你可以像平常一样处理它 - 例如，在外部范围内将其保存到一个变量中以供日后使用，或者使用parentElement等方法来在树中定位它。 - Max Shawabkeh

1

（window.event.srcElement是仅适用于IE的。对于所有其他浏览器，它是event.target。） - bobince

是的，你关于srcElement的说法是正确的。然而，如果我想要在稍后的另一个函数中为该元素或目标设置样式，该怎么办呢？例如，我尝试了这个方法，但它并不起作用...http://pastebin.com/qrSjsY4C谢谢！ - oimoim

1

请在原问题中发布您的代码（并使用代码格式）。 - Marcel Korpel

你的示例在var target=...这一行出错了，event未定义。 - Marcel Korpel

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcel Korpel · Accepted Answer

事件的目标是哪个HTML元素？ (作者Peter-Paul Koch在Quirksmode.org上发布)。此外，还需要查看W3C DOM Level 2 Event Model中事件对象的target属性。

<!DOCTYPE html>
<html>
  <head>
    <title>target test</title>
    <style>
      *        { border: 1px solid #fff }
      .trigger { background: lightgreen }
    </style>
  </head>
  <body>
    <p class="trigger">Trigger testCase().</p>
    <p class="trigger">Trigger testCase().</p>
    <p class="trigger">Trigger testCase().</p>
    <p id="display"></p>
    <script>
var lastelem;

document.onmouseover = function (e) {
        var event = e || window.event;

        if (lastelem) {
                lastelem.style.border = "1px solid #fff";
        }

        var target = event.target || event.srcElement;
        document.getElementById('display').innerHTML = target.previousSibling.tagName +
            " | " + target.tagName + " | " + (target.nextSibling ? target.nextSibling.tagName : "X");
        target.style.border = "1px solid";
        lastelem = target;
};
    </script>
  </body>
</html>