Distinguish between single and doubleclick

I have the following snippet for distinguishing between clicks and doubleclicks:

observeSingleAndDoubleClick: function (element, si开发者_JAVA百科ngleClickHandler, doubleClickHandler, timeout) {
    var clicks;
    $(element).observe('click', function (event) {
        ++clicks;
        if (clicks === 1) {
            var timeoutCallback = function (event) {
                if (clicks === 1) {
                    singleClickHandler.call(this, event);
                } else {
                    doubleClickHandler.call(this, event);
                }
                clicks = 0;
            };
            timeoutCallback.bind(this).delay(timeout / 1000);
        }
    }.bind(this));
}

Problem: The event does not live anymore when the delay callback gets called. Though it works in Firefox but it does not in IE8. The event object passed to the click handlers is "dead" since the event itself is already passed.

Anyone has an advice how to solve this problem?

Don't only observe the click event but also the doubleclick event.

$(element).observe('click',singleClickHandler); 
$(element).observe('dblclick',doubleClickHandler);

Here is a changed version after all the discussion:

var clicks;    
observeSingleAndDoubleClick: function (element, singleClickHandler, doubleClickHandler, timeout) {

$(element).observe('click', function (event) {
    ++clicks;
    if (clicks === 1) {
        var timeoutCallback = function (event) {
            if (clicks === 1) {
                singleClickHandler.call(this, event);
            } else {
                doubleClickHandler.call(this, event);
            }
            clicks = 0;
        };
        timeoutCallback.bind(this, event).delay(timeout / 1000);
    }
}.bind(this));

}

I know the OpenLayers project foes something similar. Look at line 210 in this file: OpenLayers.Handler.Click sourcecode.

I don't know how to use this with the Prototype framework, but I hope it can get you on the right way :)

Another thing: wouldn't it better to use the mouseUp event instead of the click?

There's a dblclick event id on Prototype. Why don't you use it?

observeSingleAndDoubleClick: function (element, singleClickHandler, doubleClickHandler) {

  $(element).observe('click', function (event) {
    singleClickHandler.call(this, event);
  }

  $(element).observe('dblclick', function (event) {
    doubleClickHandler.call(this, event);
  }
}