Menu
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?
606
The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children. Tip: This event is often used together with the onmouseover event, which occurs when the pointer is moved onto an element, or onto one of its children.
Definition and Usage The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children. Tip: This event is often used together with the onmouseout event, which occurs when a user moves the mouse pointer out of an element.
CSS itself does not support a mousein or mouseout selector. The :hover selector will apply to the element while the mouse is over it, adding the style when the mouse enters and removing the style when the mouse leaves.
The onMouseOver event in React occurs when the mouse pointer is moved onto an element (it can be a div, a button, an input, a textarea, etc). The event handler function will be fired and we can execute our logic there. The onMouseOut event in React occurs when the mouse pointer is moved out of an element.
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.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
