Firefox 3.6 introduced a very annoying bug, and only on a Mac.

If you're using somewhere a MouseEvent.ROLL_OUT or MouseEvent.MOUSE_OUT, this event will fired even if you only click on a object without leave the object with the mouse.

Example there

The select box in the middle of the page doesn't work because a roll out event is fired when you click on it.

I didn't try yet to find a fix with MOUSE_UP and MOUSE_DOWN, but the problem is, all the existing sites that are using those events might be broken...

I believe Firefox is, or not firing the right event, or removing and putting back the flash so it loses the focus, meaning roll out is fired... A friend told me that the same things happen with java applet, didn't verify it yet.

Bug report

To test it, paste this as a document class:

Actionscript:
  1. package com.soundstep.baseui.demo {
  2.     import flash.events.MouseEvent;
  3.     import flash.display.Sprite;
  4.     public class Main extends Sprite {
  5.         public function Main() {
  6.         var s:Sprite = new Sprite();
  7.         s.graphics.beginFill(0xFF0000);
  8.         s.graphics.drawRect(0, 0, 100, 100);
  9.         s.addEventListener(MouseEvent.MOUSE_OUT, test);
  10.         addChild(s);
  11.         }
  12.         private function test(e:MouseEvent):void {
  13.             trace("ok");
  14.         }
  15.     }
  16. }

Click on the square and you'll see that the MOUSE_OUT is fired...

I hope they'll fix soon or I'll have to find a hack and change everything that is live.

Romu

Vote in HexoSearch
17 Responses to “Firefox 3.6 Mac bug with MouseEvent”
  1. majawi says:

    I was running into a similar issue and it gave me a headache for quite some time.

    The fix however was simple (if you or anyone even still needs it):

    Replace all instances of .CLICK with .MOUSE_DOWN, replace all .MOUSE_OVER with .ROLL_OVER and .MOUSE_OUT with .ROLL_OUT

  2. Romuald says:

    I had the same issue with both MOUSE_OUT and ROLL_OUT. It might be different depending of the code.

    Romu

  3. majawi says:

    I would think the same idea as my fix above would apply, use ROLL instead of MOUSE for the hover events. Also, make sure you're not mixing ROLL_OUT with MOUSE_OVER and such, keep 'em consistent.

  4. majawi says:

    Just read your bug report on the firefox site and got a bit more clarity on your problem. I think what will ultimately fix it for you is changing the .CLICK to .MOUSE_DOWN. My scenario was almost identical to yours upon further review.

    Hope this helps!

  5. soenke says:

    i guess you just need to add this little line to your css:

    object { outline:none; }

    even if this doesn't work for your problem - you need to add this to your css since ff 3.6 to prevent the outline around your flash content. especially in fullflash sites.

  6. Brian says:

    i too can confirm this annoying bug!

    this code:

    package {
    import dk.esk.display.Square;

    import flash.display.Sprite;
    import flash.events.MouseEvent;

    public class mouseevents extends Sprite {

    //constructor
    public function mouseevents() {
    var button:Square = new Square(100, 100); //this is just a sprite with a rect graphic that has a width of 100 and a height of 100

    addChild(button);

    button.addEventListener(MouseEvent.MOUSE_OVER, over);
    button.addEventListener(MouseEvent.MOUSE_OUT, out);
    button.addEventListener(MouseEvent.MOUSE_DOWN, click);
    }

    //private methods
    private function over(e:MouseEvent):void {
    trace("OVER");
    }

    private function out(e:MouseEvent):void {
    trace("OUT");
    }

    private function click(e:MouseEvent):void {
    trace("Click");
    }
    }
    }

    also traces:
    CLICK
    OUT
    OVER

    when i click the button.

    i did add: object { outline:none; }, it doesn't work.
    i did try with ROLL_OVER and ROLL_OUT, it doesn't work.

  7. soenke says:

    yes it's right the css fix doesn't fix the mousebug.

    and the bug is getting even stranger:
    I am working on a macbook pro with a second monitor.
    when I'm tracing out the event.stageY and event.stageY values on the right (extra) monitor - its tracing me the right values and the bug doesn't exist.

    when i move the browser over to my macbook monitor - when i click the rollout event is fired and the coordinates show: -1 and -1 !!!!

    really strange this one.

  8. Brian says:

    Really really strange!! Anybody found a temporary hack? I have opened posts on both Kirupa.com and gotoandlearn.com, hoping to attract some other people with the same issues

  9. Brian says:

    The one px. focus border can be removed by adding:

    a:focus, object:focus {
    outline: none;
    -moz-outline-style: none;
    }

    to your css in the html file.

    Error still occurs tho.

  10. Joshua Feldman says:

    This is very annoying. We had this problem with one of our major projects. Here is what I did as a work around:

    I created a private variabled called _isClickEvent and typed it as a Boolean. Then in my clickHandler I wrote _isClickEvent = true; Then in the mouseOutHandler I wrote if (_isClickEvent) {_isClickEvent = false; return;} . Not the prettiest solution but it did the trick. Basically what I am doing is setting a Boolean to true in the click handler, then in the outHandler which gets fired right away (for no reason) I catch it and return the method, leaving all the code intact for when we actually call it.

    Hope this helps some people. Sorry if any of my spelling is wrong, still working, quick post :)

  11. jsd says:

    I'm having the same problem. I worked around it by using getTimer() to measure the time between the last mouse up event and the roll out. If it's < 100, it's probably a "fake" roll out generated by the Firefox bug and I ignore it.

  12. Pavel fljot says:

    Hej.

    http://bugs.adobe.com/jira/browse/FP-4145

    + http://groups.google.com/group/ruflash/browse_thread/thread/c9a239638e7ecd0d here's approx translation:

    Subject: several bugs FP10 in FF under Mac
    ...
    2. Haven't posted yet.
    *link*
    Switch several times between BY TIME and BY SIZE at the bottom. I see rendering bugs in FF like http://dl.dropbox.com/u/5334698/Picture%201.png (pieces of objects) It's OK under Safari. In FF it's also OK in fullscreen mode or with wmode direct or gpu...

    3. Affecting ActionScript. CallLater call sometimes doesn't work (custom function, but the algorithm seems correct) *code below*

    And the thing is — all 3 bugs are can "be cured" by entering fullscreen mode. So, maybe they all have one cause.

    The click bug also presents under some browsers on PC, but I can't check.. and people seems can't really get the bug =| If the click bug is more annoying, then second & third are quite critical to user experience I would say!

  13. Romuald says:

    Solved with 3.6.2

    Romu

  14. Brian says:

    That would be awesome!

  15. Pavel fljot says:

    1 & 3 looks like fixed, yes. But rendering bug still presents, Romuald, can u confirm?

  16. Romuald says:

    Not sure about the other.

  17. Joel says:

    Is it just me or has this bug been re-introduced? I'm running Mac 10.6.7, Firefox 4.0.1

Leave a Reply