Firefox/Javascript bug?

alejandro

I just noticed that in FireFox, onmouseover and onmouseout events do not work properly when a div's overflow is set to hidden/auto/scroll. If you click and hold inside the div with onmouseover/out listeners and move the mouse away, the events won't launch (they do launch properly in IE7, haven't tested other browsers). If the div has overfloe:visible, the events fire as expected.

I'll provide a working testcase:

Expand|Select|Wrap|Line Numbers

 
<html>

    <head>

        <script type="text/javascript">

            function showMouseOverDivStatus ( mouseOverDiv ){

                var mouseOverDivStatus       = window.document.getElementById("mouseOverDivStatus");

                mouseOverDivStatus.innerHTML = mouseOverDiv;

            }

            function setInnerDivOverflow( newOverflow ){

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.overflow = newOverflow;

            }

        </script>

    </head>

    <body>

        Mouse over inner div: <span id="mouseOverDivStatus">false</span>

        <div style="background:red; height:200px; width:200px">

            <div 

                id="innerDiv" 

                style="position:absolute;top:50px;left:50px;background:yellow;height:100px;width:100px;"

                onmouseover="showMouseOverDivStatus('true');" 

                onmouseout="showMouseOverDivStatus('false');"

            >

                Hold left click inside yellow area and move mouse away.

            </div>

        </div>

        <input type="button" value="Visible Overflow" onclick="setInnerDivOverflow('visible');" /><br>

        <input type="button" value="Scroll Overflow"  onclick="setInnerDivOverflow('scroll');"  /><br>

        <input type="button" value="Hidden Overflow"  onclick="setInnerDivOverflow('hidden');"  /><br>

        <input type="button" value="Auto Overflow"    onclick="setInnerDivOverflow('auto');"    /><br>       

    </body>

</html>

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Am I missing something here?

alejandro

Also, can anyone think of a workaround for this issue? I've tried a few things unsuccessfully.

mrhoo

One man's bug is another man's feature.

I suspect you are more familiar with IE than firefox-
this has to do with the way the two browsers handle
selecting text.

If you hold the mouse down before you enter the innerDiv,
the behavior as you continue to move the mouse will be as you expect.

Or if you make a selection inside the innerDiv and then move the mouse around with the button down,the behavior will be as you expect.

This should give a clue as to what you need to do to make firefox behave like
IE- I prefer the reverse, myself.

alejandro

One man's bug is another man's feature.
I suspect you are more familiar with IE than firefox.

Nope, not at all.

If you hold the mouse down before you enter the innerDiv,
the behavior as you continue to move the mouse will be as you expect.

Or if you make a selection inside the innerDiv and then move the mouse around with the button down,the behavior will be as you expect.

This should give a clue as to what you need to do to make firefox behave like
IE- I prefer the reverse, myself.

But why does it behave differently depending on the overflow of the inner div?

Also, I looked around mozilla's bugzilla and found this little devil: https://bugzilla.mozilla.org/show_bug.cgi?id=357679
yup, my find was just a particular case of a bigger firefox bug, I still don't know how can it be seen as a feature by any man :P

drhowarddrfine

Unless I misread it, the "same as" bug report says this is how it's supposed to work.

alejandro

Unless I misread it, the "same as" bug report says this is how it's supposed to work.

Why should events work in a completely different way depending on a div's overflow property?

alejandro

before this:
FF: 4563465
IE: 3

after this:
FF: 4563465
IE: 4

Congrats :)

Firefox/Javascript bug?

Post your reply

Similar topics