Событие тройного клика для jQuery. Плагин «TrplClick».

При разработке сложного веб-приложения или какого-нибудь RIA могут потребоваться кастомные пользовательские события мыши. Один из примеров такого события — тройной клик (triple click) правой кнопкой мыши по элементу.

Для реализации подобного события и его обработки разработчик может ошибочно использовать не самые удачные варианты, такие как:

  • отслеживание трех обычных кликов на основании инкрементального счетчика;
  • вариация на тему двойного клика и одинарного.

Вышеописанные способы могут ввести пользователя в заблуждение и усложнить работу с интерфейсом.

Связано это с тем, что бОльшая часть находимых в сети вариантов реализации события не учитывает интервал между кликами, что фактически позволяет запустить обработчик тройного клика по цепочке событий: двойной клик → пауза → клик.
Это неверное решение.

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


Фактически все три клика должны быть произведены с равными интервалами между собой.

Задача была выполнена. Разработанный тип обработки события тройного клика оказался достаточно удобным в использовании.

На основании полученного кода был написан плагин для jQuery.

Плагин обработки события тройного клика «TrplClick»

> > Репозиторий на GitHub

Установка

Плагин можно скачать с вышеуказанного репозитория либо установить используя пакетный менеджер bower:

bower install jquery-trplclick

Использование

Классический jQuery-way:

$('.myBtn').on('trplclick', function () {
  // Ваш код обработки события тройного клика
});

Обратите внимание на то, что событие называется trplclick (по аналогии с dblclick)

Параметры

Параметры подобраны универсальными, под большинство случаев. Однако плагин допускает конфигурирование следующих значений:

  • minClickInterval — минимальный интервал между кликами. По-умолчанию: 100 (ms);
  • maxClickInterval — максимальный интервал между кликами. По-умолчанию: 500 (ms);
  • minPercentThird — минимальное отклонение времени третьего клика (в процентах) от интервала между первым и вторым. По-умолчанию: 85.0 (%);
  • maxPercentThird — максимальное отклонение времени третьего клика (в процентах) от интервала между первым и вторым. По-умолчанию: 130.0 (%).

N.B. Несмотря на постановку задачи о трех равномерных кликах алгоритм учитывает небольшое отклонение между двумя интервалами: первый-второй клик и второй-третий.
Это сделано по причине того, что человеку физически трудно выполнить три абсолютно равномерных клика.

Стандартные параметры плагина для третьего клика позволяют сохранить у пользователя ощущение равномерных кликов.

При желании код легко адаптируется для чистого JavaScript.

Также автор рассуждал на тему случайных чисел в JavaScript: Генерация случайных чисел в широком интервале на JavaScript.