Web Development

“onmouseout” issues

Posted on: December 27, 2007

We have a layer, say an unordered list with links in it. We want to hide/show the layer. We can hide the layer by attaching a handler to mouse out event of the layer. However this doesn’t work as expected. Because of event bubbling and the way browsers implement this event, mouse out event is fired whenever mouse moves from the layer to a link within it (even though the mouse pointer is still inside the layer). This might cause flickering of the layer based on the implementation. One way out of this issue is to check on mouse out if the ‘related target’ element is the child of layer. If yes, do nothing else hide the layer. Related target is the element to which the mouse moves. None of the links within the ‘ul’ will qualify for the mouse out event handler but when the focus moves out of ‘ul’ to its parent the handler is invoked.

quirksmode has a detailed article on mouse events and the intricacies of the above mentioned issue.

Advertisements

1 Response to "“onmouseout” issues"

Good article! Come to visit my blog! I’m sorry but it’s only in italian
Bye,

Emar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: