Blog. Just Blog

Обработка событий тачскринов на JavaScript

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

С развитием рынка мобильных устройств появилась необходимость дорабатывать сайты для более комфортного просмотра на планшетах и смартфонах. Так появилась адаптивная верстка. Но одной верстки недостаточно, кроме отображения требуется наладить взаимодействие web-приложения с пользователем, используя такие действия, как листание, мультитач и поворот экрана. Вот как это реализуется на JavaScript.

Начнем с самого простого - поворот экрана. При повороте экрана объекту window передается событие onorientationchange. В обработчике события проверяются значения clientWidth и clientHeight, на основании их соотношения определяется вертикальное или горизонтальное положение экрана. Использование этих значений позволяет избавиться от специфичных для разных браузеров значений типа screen.orientation. Для максимальной поддержки различных браузеров, обработчик поворота надо дублировать обработчиком события onresize - изменение размеров окна браузера.
  1. <script type="text/javascript">
  2. // Обработчик поворота экрана
  3. function change_orientation() {
  4.     alert('Screen: '+screen.width+' '+screen.height);
  5. }
  6. // Установка обработчика поворота экрана
  7. if (window.onorientationchange) {
  8.     window.onorientationchange=function() {
  9.         change_orientation();
  10.     }
  11. }
  12. else {
  13.     window.onresize = function() {
  14.         change_orientation();
  15.     }
  16. }
  17. </script>
Нажатия на экран, отпускание и листание генерируют несколько событий типа TouchEvent, а именно ontouchstart - нажатие (палец коснулся экрана), ontouchmove - перемещение нажатия, ontouchend - завершение нажатия (палец убран от экрана). В зависимости от поставленной задачи нам надо реализовать нужные обработчики. Но перед этим немного теории. Все перечисленные события имеют следующие свойства:

Свойство объекта
TouchEvent
Описание
touchesВсе нажатия
targetTouchesВсе нажатия в границах элемента, в котором произошло событие
changedTouchesИзменившиеся нажатия с момента последнего нажатия (это полезно применять в обработчиках ontouchmove и ontouchend, а также для фильтрации новых и отпущенных нажатий)

Каждая из трех перечисленных коллекций свойств Touch, в свою очередь, имеет свойства, по которым можно точно отследить координаты нажатия и элементы web-страницы, на которых эти нажатия произошли.

Свойство объекта
Touch
Описание
clientX, clientYКоординаты нажатия относительно границ видимой области браузера
screenX, screenYКоординаты нажатия относительно границ экрана
pageX, pageYКоординаты нажатия относительно границ web-страницы, включая позицию вертикальной и горизонтальной прокрутки
identifierЧисловой идентификатор нажатия для его отслеживания между событиями
targetЭлемент web-страницы, в границах которого произошло событие

Обработчик события привязывается к документу целиком или к конкретному элементу web-страницы, который должен отвечать за взаимодействие с тачскрином. Например, полоса прокрутки или область с пролистываемым контентом.
  1. <div id="container" ontouchstart="multitouch(event);">Touch me</div>
Обработчик события нажатия выглядит примерно так:
  1. <script type="text/javascript">
  2. // Обработчик мультитача
  3. function multitouch(event) {
  4.     // Подавить событие
  5.     event.preventDefault();
  6.     // Обработать массив с координатами нажатий
  7.     for (var i=0i<event.touches.lengthi++) {
  8.         // Получить координаты каждого нажатия
  9.         var left=event.touches[i].pageX;
  10.         var top=event.touches[i].pageY;
  11.         // Выполнить с ними нужные действия
  12.     }
  13. }
  14. </script>
Таким образом можно отслеживать как множественные, так и одиночные нажатия. В последнем случае не обязательно перебирать весь массив, достаточно получить координаты только объекта с нулевым индексом.

Следующее действие - перетаскивание объектов. Если на стационарных компьютерах это было достаточно сложно реализовать, то на мобильных устройствах с тачскринами перетаскивание элементов web-страницы реализуется буквально несколькими строчками кода. Все основано на событии ontouchmove.
  1. <div id="floating" ontouchmove="move_object(event);">Drag me</div>
Теперь в обработчике достаточно отслеживать координаты, откуда пришло сообщение о перемещении нажатия и туда же перемещать объект.
  1. <script type="text/javascript">
  2. // Перетаскивание элемента
  3. function move_object(event) {
  4.     // Подавить событие
  5.     event.preventDefault();
  6.     var left=event.touches[0].pageX;
  7.     var top=event.touches[0].pageY;
  8.     // Переместить элемент
  9.     var el=document.getElementById('floating');
  10.     el.style.top=top+'px';
  11.     el.style.left=left+'px';
  12. }
  13. </script>
Для отслеживания момента, когда палец будет отпущен, используется событие ontouchend. В этом обработчике можно отследить, какие нажатия изменились и выполнить соответствующие действия.

Ну и последнее на сегодня - листание. Это комбинированное событие, начинающееся с нажатия и заканчивающееся сдвигом нажатия влево или вправо на определенное расстояние. Для определения расстояния при первоначальном нажатии надо сохранить координаты события, а в обработчике движения отслеживать разницу между текущими и сохраненными координатами нажатия. Как только разница будет превышать определенное значение, событие листания можно считать состоявшимся. Направление листания определяется по тому, больше или меньше текущие координаты сохраненных.
  1. <div ontouchstart="turn_start(event);" ontouchmove="turn_page(event);">Turn me</div>
  1. <script type="text/javascript">
  2. var touch_position// Координата нажатия
  3.  
  4. function turn_start(event) {
  5.     // При начальном нажатии получить координаты
  6.     touch_position event.touches[0].pageX;
  7. }
  8. function turn_page(event) {
  9.     // При движении нажатия отслеживать направление движения
  10.     var tmp_move touch_position-event.touches[0].pageX;
  11.     // Сдвиг достаточный?
  12.     if (Math.abs(tmp_move)<10) { return false; }
  13.     if (tmp_move<0) {
  14.         // Листаем вправо
  15.     }
  16.     else {
  17.         // Листаем влево
  18.     }
  19. }
  20. </script>
Естественно, направление листания может быть не только горизонтальным, но и вертикальным, и даже диагональным. Для этого достаточно просто отслеживать необходимые координаты по вертикали и/или горизонтали.

На демонстрационной странице вы можете посмотреть все описанные действия: обработку поворота экрана, перетаскивание элементов, мультитач и литстание. Смотреть страницу надо с мобильных устройств, на стационарных компьютерах ничего работать не будет.

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

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

Комментарии

Отзывы посетителей сайта о статье
Freelancer (15.05.2018 в 12:17):
Финальное листание правильнее выполнять на событие touchend, а в touchmove фиксировать только сдвиг, иначе будет множественное срабатывание листания.
ManHunter (04.02.2018 в 00:50):
В чем проблема? Мышь прекрасно работает через OTG, события все те же, что и на десктопе.
Дмитрий (02.02.2018 в 23:39):
А как сделать одновременно чтобы и мышка работала и тач?
Cooller (20.09.2015 в 22:15):
Спасибо, очень помогло!
cyberdjon (01.08.2014 в 16:29):
Классная статья. Спасибо.

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

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

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