Getting id of any tag when mouseover

Question

does anyone know how i can get the id of any element when the mouse is over ?

I want to show a div (box) over the elements (tags) the mouse is over. I cannot modify the tags to include a mousover event. I want a global callback or something like that to have the id of the tag which is under the mouse pointer.

Thanks !

Answer 1

You mean you want the target of the onmouseover event, so you can access the element's properties:

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

Take a look at Event Properties for a cross-browser way to get the target (the following example is from the aforementioned website):

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

So to put those together:

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