CODEWITHSUNDEEP
javascriptdomcross-browserdom-events
Simon Lang
Simon Lang

Reputation: 42655

event.toElement in IE8 and Firefox?

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.

Upvotes: 55

Views: 30296

Answers (6)

Azam Alvi
Azam Alvi

Reputation: 7055

Instead of event.toElement you should use this:

event.target

Upvotes: 51

Simon Lang
Simon Lang

Reputation: 42655

In Firefox it is event.relatedTarget https://developer.mozilla.org/en/DOM:event.relatedTarget#1003983

Upvotes: 26

simomo
simomo

Reputation: 726

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.

Upvotes: 11

Jay
Jay

Reputation: 1033

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

Upvotes: 7

joseAndresGomezTovar
joseAndresGomezTovar

Reputation: 819

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

Upvotes: 0

gpasse
gpasse

Reputation: 4489

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

Upvotes: 8

Related Questions