Guaranteeing the onmouseout event to fire

Question

Hello everybody,

I'm currently developing a web application and have run into a little problem. I'm using ExtJS, but I believe this to be a general JS question.

When the cursor enters an HTML element, the onmouseover event is fired, when the cursor leaves that element, onmouseout is triggered. So far, so good. Unfortunately, it seems one can't fully rely on this behaviour. Very quick mouse movements can cause the event not to fire (as does repositioning the cursor with a pen tablet, for example).

What are the best practices to handle these issues? Do I need to monitor all onmousemove events and manually keep track of where the cursor was last and fire the appropriate onmouseout event myself?

Answer 1

I've had a similar problem before and I used this technique. This may not help with situations when you reposition the cursor with a pen tablet, I don't have one to check else I would, but you can assume this to be an abnormal occurrence if you're targeting normal web users. Let me know if that works - if not, I'll see if I can help more.

Martyn

Answer 2

This is a common issue, and is not trivial to solve. It's basically impossible to solve by trying to handle mouseover/out at the individual element level. Using Ext JS, it's generally advisable to use delegated event handling when possible, which can also help with monitoring mouse events. E.g., monitor for mouseover/out at the highest level possible, and check the event target and/or related target (properties of the event object passed into your handling function) to figure out which elements are involved during any given event (I have done this myself -- it can get tricky, but it's effective). If your use case is monitoring for valid drag/drop scenarios, the DragZone and DropZone classes were designed to do this.

If you can fill in some more details about what you're trying to accomplish it might help.