54

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.

2
  • 1
    Just as a side note, in jQuery it would be api.jquery.com/event.relatedTarget as in Firefox. Dec 26, 2013 at 22:40
  • 2
    I'm not so sure about that @BarnabasSzabolcs. here in 2018, e.relatedTarget and $(e).relatedTarget are null and undefined respectively
    – boatcoder
    May 22, 2018 at 20:29

6 Answers 6

51

Instead of event.toElement you should use this:

event.target
5
  • 1
    This answer is the one that worked for me. currentTarget and relatedTarget can give you different results. e.g. in a click event for an <a> when <ul><li><a></a></i></ul> e.target gives me <a> (just as e.toElement), but currentTarget and relatedTarget gives me the entire <ul>. May 20, 2014 at 15:08
  • 1
    This is exactly what I needed. I'm newish to javascript so I don't know why I was even using "toElement" probably some code example I saw somewhere. Target is clearly what I wanted in the first place. Nov 10, 2014 at 17:00
  • 1
    This is the best answer. Jan 8, 2015 at 21:37
  • Here is a good example if you also want to get Webkit/Chrome's localName gist.github.com/aubreypwd/748ba5958ae3fde694a2
    – aubreypwd
    Nov 18, 2015 at 14:49
  • 13
    Isn't target the element were the mouse leaves from ? toElement would be the elemtn where the mouse leaves to so the answer would be wrong?
    – Alex
    Jul 6, 2016 at 10:32
25

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

3
  • Since you realized that IE does have event.toElement, please remove it's reference from the question and answer to avoid the confusion... doing so won't invalidate any other existing answers.
    – T J
    Sep 14, 2014 at 10:05
  • 4
    FYI - IE11 does not appear to have event.toElement
    – Andrew Liu
    Dec 18, 2014 at 22:50
  • 2
    Please use Azam Alvi's answer .target is prefered. Jan 8, 2015 at 21:38
11

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.

8

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

2
  • 2
    event.currentTarget is returning me the element the event belongs to, not the element that is being interacted with. You can use event bubbling for example to define an event on a parent element so you don't have to attach similar event handlers to all child elements. Sep 11, 2014 at 22:20
  • yeah why on earth doesn't FF have a toElement :(
    – Nikos
    Jul 18, 2016 at 11:25
7

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

1
  • any benefit to this vs just using e.target?
    – Nikos
    Jul 18, 2016 at 11:32
0

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
1
  • 1
    I think is more efficient to do evt.toElement = thesupportedFunction just one time then use the evt.toElement Sep 29, 2014 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.