I discovered recently that it causes headache when using mouseover and mouseout events together on one HTML element. This will not have any problem if that element does not have any child element, otherwise,  the problem starts. My problem occurred when I tried to use special effects when mouseover and mouseout of an element which has one child element. The effects became to be very flickering. After a while of searching on the internet as usual, I found a post which explains the problem very well. It is because:

First mouseover event is fired when mouse over the REAL observed element, and then when the mouse moves into the child element, it thinks that your mouse has moved out from the REAL observed element so that its mouseout event is fired, but soon it realizes that the mouse is still within the area of its parent and then fires again its mouseover event….

I guess in most of the cases, this is not a proper behavor that one wants to be. Below I have pasted some code that I found which solves my problem very well:

function isMouseLeaveOrEnter(e, handler) {
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;
        var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ?
        e.toElement : e.fromElement;

    while (reltg && reltg != handler)
        reltg = reltg.parentNode;

    return (reltg != handler);
}

In the code above, e is the element which the current event belongs to and handler is the REAL observed element. The problem is solved by calling this function before executing your real event handler’s code.

I hope this could help anyone else who has this similar annoying problems.

Recent Entries

• First but the best birthday party in Sweden!
• Stop motion movie to Shunshun
• Quick release of Randomlunch.se
• Passing parameters to event handler functions
• Mouseover and mouseout problem
• 最近心情不好。。
• …………………..
• 缘分~~
• First touch of Drupal
• New life? Different life? My own life!

This entry was posted on Monday, July 27th, 2009 at 11:35 pm and is filed under geeky stuff. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.