Question

I have 3 divs containing each other like a Matryoshka doll.

For all divs, I’ve a function bound the mousenter event. Now moving the mouse slowly from the bottom, and entering into layer three will result in the following events:

1. Mouseenter layer one
2. Mouseenter layer two
3. Mouseenter layer three

Which is perfect, and the expected result, as you need to enter layer one first, in order to enter layer two, etc.

However if I do the same with a quick mouse movement, the order will be unspecified, for example:

1. Mouseenter layer two
2. Mouseenter layer one
3. Mouseenter layer three

Which doesn’t make too much sense to me – how can your mouse enter layer two before entering layer one?

Anyway, the question is: is there any way to force jQuery or javascript in general to fire these events in their natural order? If no, can you suggest me a workaround, like somehow post sorting the events from my event handler function, and postponing those that were prematurely called?

Test code is posted at http://jsbin.com/ibepu6/4/

Answer 1

Normally mouseenter and mouseleave events are microsoft based events, jquery make them useable in all browsers using other function to create this effect… First have a loook at and test the demo in jquery event page. I do not check the jquery source, but there is two diffrent event ordering mechanism in javascript as far as i know… Event capturing and event bubbling…

This document is not new, but it describes the basics whish you need. This is an older document about mouse events and how do they executed…

So check jquery source and see how mouseenter and mouseleave works. As i said before, it is not the basic function that only runs on IE, but a simulation that acts just like mouseenter and mouseleave events by using other javascript functions… Thats how jquery enebles these two Microsoft event available to all browsers…