Blog. Just Blog

Обработка двойного тапа с задержкой на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Обработка двойного тапа с задержкой на JavaScript
Обработка двойного тапа с задержкой на JavaScript

Обычно для обработки двойного клика на каком-нибудь элементе HTML-страницы используется событие ondblclick. Но у ondblclick есть большой недостаток: при задании обработчика нельзя устанавливать произвольный интервал между первым кликом (тапом на экране мобильного устройства) и последующим кликом. Кроме того, я встречал в интернетах информацию, что на некоторых мобильных устройствах событие ondblclick передается как два последовательных события одиночного нажатия onclick.

В результате недолгих размышлений появилась вот такая функция-обработчик события onclick, которая может обрабатывать как одиночное нажатие, так и двойное. При этом теперь можно задавать произвольный интервал срабатывания для каждого элемента DOM, к которому она прицепляется.
  1. //-------------------------------------------------------------------
  2. // Обработка одиночного и двойного тапов на элементе
  3. //-------------------------------------------------------------------
  4. // elem - элемент, от которого пришло событие onclick
  5. // single_tap_function - функция обработки одиночного нажатия
  6. // double_tap_function - функция обработки двойного нажатия
  7. // tap_delta_time - интервал ожидания (мс) между нажатиями
  8. //-------------------------------------------------------------------
  9. function hook_tap(elemsingle_tap_functiondouble_tap_function,
  10.                   tap_delta_time) {
  11.     if (elem.single_tap_timer==null) {
  12.         // Первый клик или тап
  13.         elem.single_tap_timer setTimeout(
  14.             single_tap_function
  15.             tap_delta_time
  16.         );
  17.     }
  18.     else {
  19.         // Второй клик или тап
  20.         clearTimeout(elem.single_tap_timer);
  21.         elem.single_tap_timer null;
  22.         double_tap_function();
  23.     }
  24.     return false;
  25. }
Принцип работы простейший: при первом клике взводится таймер, если за это время не было других нажатий, то выполнится первая функция, иначе при повторном нажатии таймер будет остановлен и выполнится вторая функция. В коде самой странички подключение обработчика будет выглядеть примерно так:
  1. <img src="button.png" onclick="
  2.     return hook_tap(
  3.         this,
  4.         // Функция обработки одиночного клика/тапа
  5.         function() {
  6.             alert('single');
  7.         },
  8.         // Функция обработки двойного клика/тапа
  9.         function() {
  10.             alert('double');
  11.         },
  12.         // Пауза между нажатиями, мс
  13.         700
  14.     );"
  15. />
По аналогии можно переделать эту функцию на обработку тройного клика или тапа, если используется мобильное устройство. Штатных событий на такое многократное нажатие в JavaScript, естественно, нет. Изменения в коде будут небольшими.
  1. //-------------------------------------------------------------------
  2. // Обработка одиночного, двойного и тройного тапов на элементе
  3. //-------------------------------------------------------------------
  4. // elem - элемент, от которого пришло событие onclick
  5. // single_tap_function - функция обработки одиночного нажатия
  6. // double_tap_function - функция обработки двойного нажатия
  7. // triple_tap_function - функция обработки тройного нажатия
  8. // tap_delta_time - интервал ожидания (мс) между нажатиями
  9. //-------------------------------------------------------------------
  10. function hook_tap(elemsingle_tap_functiondouble_tap_function,
  11.                 triple_tap_functiontap_delta_time) {
  12.  
  13.     if (elem.single_tap_timer==null && elem.double_tap_timer==null) {
  14.         // Первый клик или тап
  15.         elem.single_tap_timer setTimeout(
  16.             function() {
  17.                 elem.single_tap_timer=null;
  18.                 elem.double_tap_timer=null;
  19.                 single_tap_function();
  20.             },
  21.             tap_delta_time
  22.         );
  23.     }
  24.     else if (elem.double_tap_timer==null) {
  25.         // Второй клик или тап
  26.         elem.double_tap_timer setTimeout(
  27.             function() {
  28.                 elem.single_tap_timer=null;
  29.                 elem.double_tap_timer=null;
  30.                 double_tap_function();
  31.             },
  32.             tap_delta_time
  33.         );
  34.         clearTimeout(elem.single_tap_timer);
  35.         elem.single_tap_timer null;
  36.     }
  37.     else {
  38.         // Третий клик или тап
  39.         clearTimeout(elem.single_tap_timer);
  40.         elem.single_tap_timer null;
  41.         clearTimeout(elem.double_tap_timer);
  42.         elem.double_tap_timer null;
  43.         triple_tap_function();
  44.     }
  45.     return false;
  46. }
Подключение практически такое же, только добавляется функция, которая будет вызвана при тройном клике или тапе на элемент.
  1. <img src="button.jpg" onclick="
  2.     return hook_tap(
  3.         this,
  4.         // Функция обработки одиночного клика/тапа
  5.         function() {
  6.             alert('single');
  7.         },
  8.         // Функция обработки двойного клика/тапа
  9.         function() {
  10.             alert('double');
  11.         },
  12.         // Функция обработки тройного клика/тапа
  13.         function() {
  14.             alert('triple');
  15.         },
  16.         // Пауза между нажатиями, мс
  17.         500
  18.     );"
  19. />
Пример готовых обработчиков одиночного, двойного и тройного нажатия вы можете посмотреть на демонстрационной страничке. Надеюсь, что кому-нибудь пригодится.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 1138 | Комментариев: 0

Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.19 сек. / MySQL: 2 (0.0055 сек.) / Память: 4.75 Mb
Наверх