← back to all talks and articles

Using relatedTarget in Javascript event handlers

Here’s a nice trick for working with mouse events in a web page. Given a simple drop down menu, I used to use a timer to delay the closing of a submenu while the mouse travels from the menu title to the sub menu (where it nog longer hovers over the menu title, that had the original event handler). The timer going off would hide the submenu, unless the mouse entering the submenu fired a new event handler that would reset the timer.

So, yeah, that wasn’t ideal.

I learned the other day that, given adjacent element you can actually use event.relatedTarget to get to the element the mouse travels to when leaving the element that fired the mouseout event. Neat!

Now you can check for the target element and do all kinds of nifty stuff, and get rid of all timers. They sucked anyway.

Example jQuery code:

$('nav a').mouseout(function(e) {
    var submenu = $('.submenu', this.parentNode);
    if(e.relatedTarget != submenu) {
        submenu.slideUp();
    }
});
  • code
  • javascript
Arjan van der Gaag

Arjan van der Gaag

A thirtysomething software developer, historian and all-round geek. This is his blog about Ruby, Rails, Javascript, Git, CSS, software and the web. Back to all talks and articles?

Discuss

You cannot leave comments on my site, but you can always tweet questions or comments at me: @avdgaag.