Question

Would anyone happen to know how to get the HTML tag directly under a mouse cursor on a web page? I am working on a new type of WYSIWYG, and wish to implement some true drag and drop capabilities (not insert at cursor, which is so common to WYSIWYGs these days); to do that, I need to know where to insert a menu item when a mousebutton up event fires.

Ideas are welcome as well, as I understand it may be a complicated problem.

Answer 1

Here’s an example based upon the link @mightyuhu suggested:

document.onmouseover = function(e){
    targ = getTarget(e);
    targ.style.border = '1px solid #F00';
    document.getElementById('currentElement').innerHTML = targ.tagName;
};

document.onmouseout = function(e){
    getTarget(e).style.border = 'none';
};


function getTarget(e){
    if (e.target) return e.target;
    else if (e.srcElement) return e.srcElement;
}

There’s also this: http://jsfiddle.net/5NFeX/3/
​