event.toElement in IE8 and Firefox?

JavascriptDomCross BrowserDom Events

Javascript Problem Overview


I have noticed that in Chrome and IE9, for onmouseout events there is an event.toElement property (so you can determine which element the mouse is now pointing at).

I can not find a comparable property in Firefox.

Unfortunately I can not use jQuery to handle these events, I have to use native js.

Any advice would be appreciated.

Javascript Solutions


Solution 1 - Javascript

Instead of event.toElement you should use this:

event.target

Solution 2 - Javascript

Solution 3 - Javascript

I met a issue when I use Jay's answer, event.target on firefox points to the parent element of event.toElement's target on chrome.
After looking into the event obj, I find event.originalEvent.target, it works good on both firefox and chrome.

Solution 4 - Javascript

Actually event.currentTarget should work in Chrome, Firefox and IE

Solution 5 - Javascript

As of 2014, IE11 doesn't support toElement, I looked through the event object and found target to have the same data as toElement.

That is to say, if you click on a child element inside an element that this event triggered on, the child element will be the 'target' and stored in this attribute.

The element the event fired from is stored in the currentTarget attribute.

Note, I've only tested this for ie 11 so older versions may not support this.

So to support firefox ie and chrome (and possibly others, a polyfill would be necessary, something like:

var target = e.toElement || e.relatedTarget || e.target || function () { throw "Failed to attach an event target!"; }

Where e is the event

Solution 6 - Javascript

code easy to follow..

enter code here
if(typeof evt.toElement !== "undefined")
{
        evt.toElement.classList.toggle('done');
}
else if(typeof evt.relatedTarget !== "undefined")
{
    if(evt.relatedTarget !== null)
    {
        evt.relatedTarget.classList.toggle('done');
    }
    else if(typeof evt.currentTarget !== "undefined")
    {
        evt.currentTarget.classList.toggle('done');
    }
    else
    {
    console.log("s_f_li_clickexception...");	
    } //endif
} //endif

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncaptainclamView Question on Stackoverflow
Solution 1 - JavascriptAzam AlviView Answer on Stackoverflow
Solution 2 - JavascriptcaptainclamView Answer on Stackoverflow
Solution 3 - JavascriptsimomoView Answer on Stackoverflow
Solution 4 - JavascriptgpasseView Answer on Stackoverflow
Solution 5 - JavascriptJayView Answer on Stackoverflow
Solution 6 - JavascriptjoseAndresGomezTovarView Answer on Stackoverflow