Как предотвратить запуск события single click при двойном клике в extjs

У меня есть панель дерева, и для каждого узла у меня есть события single click и double click. но когда я дважды щелкаю, он также запускает событие single click. Итак, как предотвратить запуск события с одним щелчком мыши при двойном щелчке?

2 6
double-click user-experience event-handling extjs

2 ответа:

Обычно использованиеКак событий с одним щелчком, так и событий с двойным щелчком считается плохой практикой и крайне не рекомендуется.

Однако, если вы все еще хотите сделать это, единственный способ отличить одиночный клик от двойного-искусственно добавить это различие, измеряя время между щелчками. Идея заключается в том, что вы не делаете свое действие одним щелчком сразу, а ждете второго щелчка. Если второй щелчок происходит в ближайшее время, то ваше действие двойного щелчка получает вызванный. В противном случае ваше действие одного клика запускается после задержки.

Ваш код будет выглядеть примерно так: 

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

Очевидными недостатками являются:

  • существует задержка для одного действия щелчка
  • в разных ОС могут быть разные настройки для интервала между щелчками, которые вызвали бы двойной щелчок, поэтому жесткое кодирование singleClickDelay не является надежным
  • таймер JavaScript не является точным на 100%, и результаты могут отличаться в системах с различная производительность

Я не знаю лучшего решения, и опять же, я не советую вам использовать как один, так и два клика одновременно, это обычно приводит к нарушению пользовательского опыта.

9

Я думаю, что лучше выполнить действие на первом событии щелчка, а не на втором. Вы можете сделать это, установив логическое значение, которое вы проверяете на каждом событии щелчка.

Этот код продемонстрировал подход 

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