Firefox/Javascript bug?

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?

Apr 19 '07 #1

Follow Post Reply

2026

alejandro

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

Apr 19 '07 #2

mrhoo

428

256MB

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.

Apr 20 '07 #3

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

Apr 20 '07 #4

drhowarddrfine

7,435

Expert 4TB

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

Apr 20 '07 #5

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?

Apr 20 '07 #6

alejandro

before this:
FF: 4563465
IE: 3

after this:
FF: 4563465
IE: 4

Congrats :)

Apr 23 '07 #7

Firefox/Javascript bug?

Post your reply

Similar topics