How to prevent firing single click event when double clicked in extjs

Question

I have a tree panel and for each node i have single click and double click events. but when i double click it is firing the single click event also. so how to prevent firing single click event when double clicked?

Answer 1

Generally using both single click and double click events is considered a bad practice and highly discouraged.

However, if you still want to do this, the only way to be able to distinct between single click and double click is to artificially add this distintion by measuring time between clicks.

The idea is that you don't do your single-click action right away but wait for a second click. If second click comes shortly, then your double click action gets triggered. Otherwise your single click action gets triggered after the delay.

Your code will look something like:

var singleClickTask = new Ext.util.DelayedTask(singleClickAction),  // our delayed task for single click
    singleClickDelay = 100; // delay in milliseconds

function onClick() {
    singleClickTask.delay(singleClickDelay);
}

function onDblClick() {
    // double click detected - trigger double click action
    doubleClickAction();
    // and don't forget to cancel single click task!
    singleClickTask.cancel();
}

function singleClickAction() {
    // something useful...
}

function doubleClickAction() {
    // something useful...
}


// setting event handlers on an Element
elem.on('click', onClick);
elem.on('dblclick', onDblClick);

The obvious downsides are:

• There is a delay for a single click action
• In different OS there can be a different setting for the interval between clicks that would trigger a double click, so hard-coding singleClickDelay is not reliable
• JavaScript timer isn't 100% accurate and results may differ on systems with different performance

I don't know any better solution, and again, I discourage you from using both single and double clicks at the same time, this usually leads to a broken user experience.

Answer 2

I think it's better to perform the action on the first click event instead of the second. You can do this by setting a boolean that you check on each click event.

This code demonstrated an approach

onGridRowClick: function(view, record, item, index, e, eOpts) {
    if (record._task_in_progress) {
       return;
    }
    // Let the second click as part of the double click to be ignored
    record._task_in_progress = true;

    // Emulating async task here
    setTimeout(function() {
        record._task_in_progress = false;
    }, 1000);
}