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

Answer 3

Another idea is to use a boolean as a flag to control what happens.

The relevant order of events on a Double Click is: Click, Double Click, Click

You can not prevent the first Click event, but by setting the boolean True in the Double Click event, and testing for that in the Click event, you can prevent the second Click from runing, and possibly messing up what the Double Click was supposed to do.

I have forms with command buttons where I want the Click to open another form, and Double Click to close it. Example code:

Private flg As Boolean

Private Sub Button_Click()
  If flg Then
    flg = False
  Else
    ... code to open the form
  End If
End Sub

Private Sub Button_DblClick(Cancel As Integer)
  flg = True
  ... code to close the form
End Sub