467,161 Members | 1,052 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,161 developers. It's quick & easy.

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
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function showMouseOverDivStatus ( mouseOverDiv ){
  5.                 var mouseOverDivStatus       = window.document.getElementById("mouseOverDivStatus");
  6.                 mouseOverDivStatus.innerHTML = mouseOverDiv;
  7.             }
  8.             function setInnerDivOverflow( newOverflow ){
  9.                 var innerDiv = document.getElementById("innerDiv");
  10.                 innerDiv.style.overflow = newOverflow;
  11.             }
  12.         </script>
  13.     </head>
  14.     <body>
  15.         Mouse over inner div: <span id="mouseOverDivStatus">false</span>
  16.         <div style="background:red; height:200px; width:200px">
  17.             <div 
  18.                 id="innerDiv" 
  19.                 style="position:absolute;top:50px;left:50px;background:yellow;height:100px;width:100px;"
  20.                 onmouseover="showMouseOverDivStatus('true');" 
  21.                 onmouseout="showMouseOverDivStatus('false');"
  22.             >
  23.                 Hold left click inside yellow area and move mouse away.
  24.             </div>
  25.         </div>
  26.         <input type="button" value="Visible Overflow" onclick="setInnerDivOverflow('visible');" /><br>
  27.         <input type="button" value="Scroll Overflow"  onclick="setInnerDivOverflow('scroll');"  /><br>
  28.         <input type="button" value="Hidden Overflow"  onclick="setInnerDivOverflow('hidden');"  /><br>
  29.         <input type="button" value="Auto Overflow"    onclick="setInnerDivOverflow('auto');"    /><br>       
  30.     </body>
  31. </html>
  32.  
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
  • viewed: 1937
Share:
6 Replies
Also, can anyone think of a workaround for this issue? I've tried a few things unsuccessfully.
Apr 19 '07 #2
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
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
Expert 4TB
Unless I misread it, the "same as" bug report says this is how it's supposed to work.
Apr 20 '07 #5
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
before this:
FF: 4563465
IE: 3

after this:
FF: 4563465
IE: 4

Congrats :)
Apr 23 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by niconedz | last post: by
6 posts views Thread by Mark Olbert | last post: by
4 posts views Thread by lmarceglia@gmail.com | last post: by
3 posts views Thread by SAL | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.