ansaurus

Question

Javascript: getting element in dom tree when mouseover

Answer 1

+2 A:

Which HTML element is the target of the event? (on Quirksmode.org, by Peter-Paul Koch). Also have a look at the target attribute of the Event object in W3C DOM Level 2 Event Model.

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

Marcel Korpel 2010-04-25 21:31:32

Yes, I've already read this. Thanks.What I need is a documentation with all the properties of parentElement, srcElement/target,...And also a way to locate the element in the dom tree. Say, if I want to highlight the parentElement in the source from the event I received with the mouseover. How can I achieve this ?

oimoim 2010-04-25 21:37:29

Marcel Korpel : This works very well ! Thanks.Now, I just need to find a way to show the surrounding tags. I think I will try with previoussibling and nextsibling.

oimoim 2010-04-25 21:56:52

@oimoim: Indeed: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling

Marcel Korpel 2010-04-25 22:00:59

Thanks for your help ;)

oimoim 2010-04-25 22:08:28

ansaurus

tags:

views:

answers:

Javascript: getting element in dom tree when mouseover

related questions