Comments on: Implementing Event Latency in JavaScript

By: omnicity

omnicity — Sat, 27 Jun 2009 12:06:40 +0000

How about doing a re-write then, using a real example?

As it stands, the article doesn’t really match the title.

By: Derekp

Derekp — Thu, 25 Jun 2009 18:46:22 +0000

I think i’ve seen this somewhere before…but it’s not bad at all

By: brothercake

brothercake — Thu, 18 Jun 2009 23:21:02 +0000

What did you intend it as a solution for?

By: Craig Buckler

Craig Buckler — Thu, 18 Jun 2009 19:24:11 +0000

Thanks for the feedback. The code above was a quick example showing how event latency can be implemented with setTimeout. It’s certainly not a solution for cross-firing issues, so apologies if that’s not clear enough.

By: brothercake

brothercake — Thu, 18 Jun 2009 16:28:40 +0000

Sorry, here’s that method again (free of typos this time!)

object.contains = function(node)
{
  if(node == this) { return true; }
  if(node == null) { return false; }
  else { return this.contains(node.parentNode); }
};

By: brothercake

brothercake — Thu, 18 Jun 2009 16:26:24 +0000

There’s a couple of things wrong with this.

Firstly – the issue you mentioned of mouseout and mouseover events cross-firing between the two elements is far better fixed by discriminating the event target using a contains() method:

object.contains = function(node)
{
if(node == this) { return true; }
if(nodes == null) { return false; }
else { return this.contains(node.parentNode); }
}

Using a timer to fix this issue is really just pasting over it, and not dealing with it at all – if you rely on such a solution, I guarantee it will come back and bite you later on.

Secondly – you say that a timer is useful for dropdown menus, but it’s only useful if it’s discriminated in some way. You need to ensure that the event is still inside the target element at the end of the timer, otherwise all you’ve done is introduce a useless pause.

By: Dan Grossman

Dan Grossman — Thu, 18 Jun 2009 00:21:30 +0000

Good topic to cover, thanks. I recently implemented a solution like this for some dropdown menus. Users sometimes have trouble keeping the mouse pointer over the menu elements while moving it to choose one, and you don’t want the menu to collapse itself immediately when the pointer leaves for just a fraction of a second. So the menu is on a delay similar to your code that watches for the mouse returning to the menu within X milliseconds to cancel the collapse.