Why are jQuery mouseenter events triggered in an unspecified order?

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...

Answer 2

I edited your code in Jsbin to post sort the events that are triggered. I am not sure if it is useful at all for your case but here is the code Edited Jsbin

Answer 3

problem is:

you can not in any case take your mouse directly to third layer as it is inside second which is inside first. there is visible parts of second and first layer.

No matter how fast you move your mouse, it will still trigger first or second before the third. There is no obvious solution to this, visible second and first layer parts mouse over will always trigger second and first mouse over before the third. If you move very fast this order can be changed but it can not be consistent.