Distinguish single and double click

Question

I have the following snippet to distinguish between clicks and double clicks:

observeSingleAndDoubleClick: function (element, singleClickHandler, 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 no longer lives when a delay callback is called. Although it works in Firefox, but it is not in IE8. The event object passed to the click handlers is dead because the event has already been passed.

Anyone have any recommendations on how to solve this problem?

Answer 1

I know that the OpenLayers project is up against something similar. Look at line 210 in this file: OpenLayers.Handler.Click source code .

I don't know how to use this with a Prototype framework, but I hope it can lead you to the right path :)

: mouseUp ?

Answer 2

click, doubleclick.

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

:

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));

}

Answer 3

Prototype has an event identifier dblclick. 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);
  }
}