Blog. Just Blog

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

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

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

В результате недолгих размышлений появилась вот такая функция-обработчик события onclick, которая может обрабатывать как одиночное нажатие, так и двойное. При этом теперь можно задавать произвольный интервал срабатывания для каждого элемента DOM, к которому она прицепляется.
Code (JavaScript) : Убрать нумерацию
  1. //-------------------------------------------------------------------
  2. // Обработка одиночного и двойного тапов на элементе
  3. //-------------------------------------------------------------------
  4. // elem - элемент, от которого пришло событие onclick
  5. // single_tap_function - функция обработки одиночного нажатия
  6. // double_tap_function - функция обработки двойного нажатия
  7. // tap_delta_time - интервал ожидания (мс) между нажатиями
  8. //-------------------------------------------------------------------
  9. function hook_tap(elem, single_tap_function, double_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. }
Принцип работы простейший: при первом клике взводится таймер, если за это время не было других нажатий, то выполнится первая функция, иначе при повторном нажатии таймер будет остановлен и выполнится вторая функция. В коде самой странички подключение обработчика будет выглядеть примерно так:
Code (HTML) : Убрать нумерацию
  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, естественно, нет. Изменения в коде будут небольшими.
Code (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(elem, single_tap_function, double_tap_function,
  11.                 triple_tap_function, tap_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. }
Подключение практически такое же, только добавляется функция, которая будет вызвана при тройном клике или тапе на элемент.
Code (HTML) : Убрать нумерацию
  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. />
Пример готовых обработчиков одиночного, двойного и тройного нажатия вы можете посмотреть на демонстрационной страничке. Надеюсь, что кому-нибудь пригодится.

Поделиться ссылкой ВКонтакте
Просмотров: 4080 | Комментариев: 0

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

Комментарии

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

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

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

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (361), COM (41), CSS (41), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (51), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (28), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (24), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (316), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (68), мониторы (6), музеи (78), мультимедиа (75), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (49), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (129), полезные функции (42), прохождения (4), процессы (25), птица (20), путешествия (25), распаковка (22), реверсинг (51), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (9), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,133 раза
<< 2024 - СЕНТЯБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
Международный день солидарности журналистов
День финансиста
День Новороссийской военно-морской базы ВМФ России
День Бородинского сражения
День танкиста
Всемирный день журавля
День памяти жертв фашизма
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.003 сек.) / Память: 4.5 Mb
Наверх