How do I avoid massive onmouseover onmouseout firing?

Question

I have a table with some columns. In each of them is a picture where I have an onmouseover/onmouseout event on it, which shows a message in a div and hides the message.

My problem is, after a user moves quickly from left to right over a lot of images, all mouseover and mouseout events of the images are executed, which looks stupid...

Is it possible to rearrange the internal event stack to avoid this, such that the user executes only the current event (mostly the first one) and then the last one, if it is not the same type?

For example, if mouseover over first image is executed and the mouse moving position stops over an image three times next to the first one. I can avoid all other events firing, because the mouse stopped over an image and the mouseover is like the one where I stopped with the mouse.

How can I avoid this multiple event firing?

Answer 1

You need to check out the hoverIntent plugin, which addresses this problem.

Answer 2

We've had the exact same problem, What we've done is on the mouseover event is to set a variable _mouseOn to true (set to false on mouseout) then set a oneTime event over that fires in say 500 ms.. The one time event will check if the _mouseOn is true and display the image

    function Hover() {
  _mouseOn = true;
  $(document).oneTime(500, "500ms", functionToCheckTheMouseOnAndDisplayTheImage);
};