Firefox/Javascript bug?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • alejandro
    New Member
    • Mar 2007
    • 27
    #1

    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:visibl e, the events fire as expected.

    I'll provide a working testcase:
    Code:
    <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?
    Tags: None
    • alejandro
      New Member
      • Mar 2007
      • 27
      #2
      Also, can anyone think of a workaround for this issue? I've tried a few things unsuccessfully.

        Comment

        • mrhoo
          Contributor
          • Jun 2006
          • 428
          #3
          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.

            Comment

            • alejandro
              New Member
              • Mar 2007
              • 27
              #4
              Originally posted by mrhoo
              One man's bug is another man's feature.
              I suspect you are more familiar with IE than firefox.
              Nope, not at all.

              Originally posted by mrhoo
              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.mozill a.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

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  Unless I misread it, the "same as" bug report says this is how it's supposed to work.

                    Comment

                    • alejandro
                      New Member
                      • Mar 2007
                      • 27
                      #6
                      Originally posted by drhowarddrfine
                      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?

                        Comment

                        • alejandro
                          New Member
                          • Mar 2007
                          • 27
                          #7
                          before this:
                          FF: 4563465
                          IE: 3

                          after this:
                          FF: 4563465
                          IE: 4

                          Congrats :)

                            Comment

                            Previous template Next
                            Working...