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

22.07.2014 | Категория: Web-мастеру и не только | Автор: ManHunter

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

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

Начнем с самого простого - поворот экрана. При повороте экрана объекту window передается событие onorientationchange. В обработчике события проверяются значения clientWidth и clientHeight, на основании их соотношения определяется вертикальное или горизонтальное положение экрана. Использование этих значений позволяет избавиться от специфичных для разных браузеров значений типа screen.orientation. Для максимальной поддержки различных браузеров, обработчик поворота надо дублировать обработчиком события onresize - изменение размеров окна браузера.

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
// Обработчик поворота экрана
function change_orientation() {
alert('Screen: '+screen.width+' '+screen.height);
}
// Установка обработчика поворота экрана
if (window.onorientationchange) {
window.onorientationchange=function() {
change_orientation();
}
}
else {
window.onresize = function() {
change_orientation();
}
}
</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-страницы, который должен отвечать за взаимодействие с тачскрином. Например, полоса прокрутки или область с пролистываемым контентом.

Code (HTML) : Убрать нумерацию

<div id="container" ontouchstart="multitouch(event);">Touch me</div>

Обработчик события нажатия выглядит примерно так:

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
// Обработчик мультитача
function multitouch(event) {
// Подавить событие
event.preventDefault();
// Обработать массив с координатами нажатий
for (var i=0; i<event.touches.length; i++) {
// Получить координаты каждого нажатия
var left=event.touches[i].pageX;
var top=event.touches[i].pageY;
// Выполнить с ними нужные действия
}
}
</script>

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

Следующее действие - перетаскивание объектов. Если на стационарных компьютерах это было достаточно сложно реализовать, то на мобильных устройствах с тачскринами перетаскивание элементов web-страницы реализуется буквально несколькими строчками кода. Все основано на событии ontouchmove.

Code (HTML) : Убрать нумерацию

<div id="floating" ontouchmove="move_object(event);">Drag me</div>

Теперь в обработчике достаточно отслеживать координаты, откуда пришло сообщение о перемещении нажатия и туда же перемещать объект.

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
// Перетаскивание элемента
function move_object(event) {
// Подавить событие
event.preventDefault();
var left=event.touches[0].pageX;
var top=event.touches[0].pageY;
// Переместить элемент
var el=document.getElementById('floating');
el.style.top=top+'px';
el.style.left=left+'px';
}
</script>

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

Ну и последнее на сегодня - листание. Это комбинированное событие, начинающееся с нажатия и заканчивающееся сдвигом нажатия влево или вправо на определенное расстояние. Для определения расстояния при первоначальном нажатии надо сохранить координаты события, а в обработчике движения отслеживать разницу между текущими и сохраненными координатами нажатия. Как только разница будет превышать определенное значение, событие листания можно считать состоявшимся. Направление листания определяется по тому, больше или меньше текущие координаты сохраненных.

Code (HTML) : Убрать нумерацию

<div ontouchstart="turn_start(event);" ontouchmove="turn_page(event);">Turn me</div>

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
var touch_position; // Координата нажатия
function turn_start(event) {
// При начальном нажатии получить координаты
touch_position = event.touches[0].pageX;
}
function turn_page(event) {
// При движении нажатия отслеживать направление движения
var tmp_move = touch_position-event.touches[0].pageX;
// Сдвиг достаточный?
if (Math.abs(tmp_move)<10) { return false; }
if (tmp_move<0) {
// Листаем вправо
}
else {
// Листаем влево
}
}
</script>

Естественно, направление листания может быть не только горизонтальным, но и вертикальным, и даже диагональным. Для этого достаточно просто отслеживать необходимые координаты по вертикали и/или горизонтали.

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

Просмотров: 29066 | Комментариев: 5

Метки: JavaScript

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

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 35,665 раз

День добровольца (волонтера)

День начала контрнаступления советских войск под Москвой

День онлайн-предпринимателя

День ниндзя

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

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

	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	31

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

Комментарии

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