Javascript：鼠标悬停时在dom树中获取元素答案

【问题标题】：Javascript: getting element in dom tree when mouseoverJavascript：鼠标悬停时在dom树中获取元素
【发布时间】：2011-02-12 04:36:17
【问题描述】：

使用时：

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

谢谢

【问题讨论】：

是一个普通的DOM元素。您可以正常对待它 - 例如稍后将其保存在外部范围内的变量中，或使用parentElement 等在树中定位它。
（window.event.srcElement 仅适用于 IE。对于所有其他浏览器，它是 event.target。）
是的，你是对的 srcElement。但是，如果我想为此元素或目标设置样式。但后来来自另一个功能。例如，我试过这个，但它不起作用...pastebin.com/qrSjsY4C谢谢！
请在原始问题中发布您的代码（并使用代码格式）。
致 Max Shawabekh：您是否知道任何文档提供了有关在树中定位元素的更多信息？谢谢

标签： javascript html dom mouseover

【解决方案1】：

Which HTML element is the target of the event?（在 Quirksmode.org 上，作者 Peter-Paul Koch）。另请查看 W3C DOM Level 2 Event Model 中 Event 对象的target attribute。

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

【讨论】：

是的，我已经读过了。谢谢。我需要的是包含 parentElement、srcElement/target、... 的所有属性的文档，以及在 dom 树中定位元素的方法。比如说，如果我想从鼠标悬停收到的事件中突出显示源中的 parentElement。我怎样才能做到这一点？
Marcel Korpel : 这很好用！谢谢。现在，我只需要找到一种方法来显示周围的标签。我想我会尝试使用 previoussibling 和 nextsibling。
@oimoim：确实：w3.org/TR/REC-DOM-Level-1/…