Firefox 3.6 breaks Flex’s doubleClick Event

After upgrading to the latest version of Firefox today I found that the doubleclick event is not working anymore. I start researching and found that the double click event is not been fired, I don’t know how long this problem will last, but i needed to do something right now, so I place a workaround to mimic the doubleClick event, here is my solution

First add this class to your project:

package com.myapp.utils
{
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.Timer;

import mx.core.UIComponent;

/**
* The DVTwoSingleClicksManager allows to two quick single click events on an UIComponent.
*/
public class TwoSingleClicksManager
{

// This is the max delay between successive single clicks to treat them as double click
private const TIME_OUT:int = 1000;

public var active:Boolean=true;
// Component to observe
private var component:UIComponent = null;

public function TwoSingleClicksManager(component:UIComponent)
{
super();
this.component = component;
this.component.addEventListener(MouseEvent.CLICK, singleClick, false, 0, true);
}

// This timer will be used to measure time between click and double click events.
private var timer:Timer = null;
// This var is used to store click event.
private var storedEvent:Event = null;
// This method resets timer and nullify var
private function stopTimer():Event {
var lc_storedEvent:Event = storedEvent;
storedEvent = null;
if (timer != null) {
timer.reset();
timer = null;
}
return lc_storedEvent;
}
// This method stops current timer, creates a new one and starts it.
private function startTimer(event:Event):void {
stopTimer();
storedEvent = event;
timer = new Timer(TIME_OUT, 1);
//timer.addEventListener(TimerEvent.TIMER_COMPLETE, deferredSingleClick);
timer.start();
}

// This method is called when a click event is sent
// One timer is started, event will be forwarded only if timer times out.
private function singleClick(event:MouseEvent):void {
if(active){
if(timer && timer.running) {
var storedEvent:MouseEvent = MouseEvent(stopTimer());
//the new event and old event should have same coordinates, that is clicked on same point
if(storedEvent.stageX  == event.stageX && storedEvent.stageY == event.stageY) {
//Alert.show(“dispatching single event…”);
stopTimer();
dispatchDoubleClick(event);
} else {
startTimer(event);
}
} else {
startTimer(event);
}
}
}


// This method is called when a double click event is sent
// Timer is stopped, so that click event is not sent
private function dispatchDoubleClick(event:MouseEvent):void {
stopTimer();
component.dispatchEvent(new MouseEvent(MouseEvent.DOUBLE_CLICK));
}
}

}

Here is the way to use it:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”setup()”>
<mx:Script>
<![CDATA[
importcom.myapp.utils.TwoSingleClicksManager;
import mx.controls.Alert;

var dcHandler:TwoSingleClicksManager;

private function setup():void{
dcHandler= new TwoSingleClicksManager(labelTxt);
}

private function doubleClickHandler(event:MouseEvent):void{
Alert.show("Double Click on "+event.currentTarget);
}

private function singleClickHandler(event:MouseEvent):void{
Alert.show("Single Click on "+event.currentTarget);
}
]]>
</mx:Script>
<mx:Canvas x=”46″ y=”37″ width=”179″ height=”140″ backgroundColor=”#DB1313″ doubleClick=”doubleClickHandler(event)” >
<mx:Text x=”53″ y=”36″ text=”Not Working” color=”#FBFDFD” fontSize=”12″ doubleClick=”doubleClickHandler(event)”/>
</mx:Canvas>
<mx:Canvas x=”314″ y=”37″ width=”378″ height=”140″ backgroundColor=”#0D0DF1″ doubleClick=”doubleClickHandler(event)”>
<mx:Text id=”labelTxt” x=”10″ y=”10″ text=”Working  &#xd;(only if you click the this label since the TwoSingleClickManager is only attached to the label, but you can attach any object)” color=”#FBFDFD” fontSize=”12″ doubleClick=”doubleClickHandler(event)” height=”114″ width=”333″/>
</mx:Canvas>
</mx:Application>

It was made like this, because I hope this is temporal, otherwise I would have added it to the component and find if we are trying to add a doubleClick event and activate it or something like that so it will work for every component, but for now you have to create a new object of this type for each component where you are expecting a doubleClick Event and deactivated if you don’t want to use it anymore. I think i will keep improving this if is necessary, but I guess a lot of people might be in a rush to fix this and i just wanted to share it.

3 Responses to “Firefox 3.6 breaks Flex’s doubleClick Event”

1. Emporer Says:
   March 20th, 2010 at 3:33 am

   Well, I can see what you are trying to do. But, triggering double click event like that won’t work well
   1) Display Objects like stage can’t use your class
   2) adding a weak reference to object forces the user to have a persistent object or else the object will be cleared by the garbage collector
   3) You won’t be able to tell if control, alt or shift were pressed or not, and the co-ordinates of the click event.
   4) Looking for an exact match for the mouse position, makes your component loose some real double click events. Its been triggered by user and hence we should give a tolerance limit.

   All this can be solved with minor mod, but the only real problem is on regular cases, the event will be dispatched twice, once by your class, other by the component itself. So we have to disable the doubleClickEnabled in all our project code.

   It happens only on leopard + fire-fox 3.6 combination, I wouldn’t go and change my entire application for some one’s slip, unless the client asks us explicitly to do so

2. JC Pontaza Says:
   March 23rd, 2010 at 2:05 pm

   Thanks for taking the time to read the code, actually the purpose of this peace of code is just to give an idea of what I was trying to do to fix the issue, that in my case is serious since some of my users are Mac/Firefox users and since Flex suppose to be cross browser compatible, I can’t tell some users “I am sorry, you cant use the app”, so I have to find a solution. I am glad you don’t have to go and change your app, I hate when something like this happen.

   All the points you described before, are valid and and actually implemented on my app code, as and I said before this is just the initial idea that I wanted to share with the people felling my pain, those obvious things that you described are things that you as Flex developer should know by default and you should modify and add to this temporary solution, I am sorry if somebody misunderstood and though that this was a fully functional class, maybe I should have specified it a little more.

   About the event been triggered twice, that’s not going to happen, see that the this event is only been triggered on two CLICK events on the same position, not on DOUBLE_CLICK, so if “the double click event works” in your browser then the standard double click will get fired, otherwise the doubleclick will never get fired and then the double single click will get dispatched.

   I tested on different environments to make sure and it does not get fired twice, if you find otherwise please let me know.

3. shashankkulkarni Says:
   July 5th, 2010 at 4:58 am

   Hi JC,

   I guess u need to remove your comment of DVTwoSingleClicksManager from this post

   Anyways its really a great workaround. I was very inspired by your post “Why front-end developers are so important to the future of businesses on the web”

   Thanks,
   Shashank

Leave a Reply

You must be logged in to post a comment.