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.
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.
To test it, paste this as a document class:
package com.soundstep.baseui.demo {
import flash.events.MouseEvent;
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
var s:Sprite = new Sprite();
s.graphics.beginFill(0xFF0000);
s.graphics.drawRect(0, 0, 100, 100);
s.addEventListener(MouseEvent.MOUSE_OUT, test);
addChild(s);
}
private function test(e:MouseEvent):void {
trace("ok");
}
}
}
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
Comments
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
I had the same issue with both MOUSE_OUT and ROLL_OUT. It might be different depending of the code.
Romu
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.
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!
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.
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.
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.
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
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.
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 🙂
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.
Hej.
http://bugs.adobe.com/jira/browse/FP-4145
+ http://groups.google.com/group/ruflash/browse_thread/thread/c9a239638e7ecd0d here’s approx translation:
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!
Solved with 3.6.2
Romu
That would be awesome!
1 & 3 looks like fixed, yes. But rendering bug still presents, Romuald, can u confirm?
Not sure about the other.
Is it just me or has this bug been re-introduced? I’m running Mac 10.6.7, Firefox 4.0.1
Hi Guys,
Firstly thanks for the post as it’s really helpful and people like me definitely appreciate the time that people like you put into helping the community 🙂
Secondly I have a simliar bug but it’s quite quirky and I thought I’d share it on here just in case it ever happens to anyone else:
Bug with Firefox + Mac + Flash + Javascript + document.onmouseup
Scenario:
Client has a webpage that has an embedded flash movie communicating with javascript through externalinterface class
and also the javascript has a document.onmouseup event listener which in turn triggers a possible pop-up, when the flash movie is clicked. (Quirky way of doing things… I know… ).
Bug:
When the flash/swf movie is clicked, the document.onmouseup event in javascript picks up the event and opens a popup window in all browsers EXCEPT for Firefox on a Mac Machine (It works on Safari and Chrome on the Mac and all browsers on a windows machine).
Workaround:
Don’t use a document.onmouseup event, instead write a function that gets called from the externalinterface communication in javascript…
I know the workaround is kind of an obvious one, but up until then I assumed it was a flash specific problem…
If even this helps one person out there then this post will have been worth it.
Quizzy 23/Feb/2012