Далее на странице...
В современном мире большая часть Интернет-аудитории использует мобильные устройства. И начинающим разработчикам не лишним будет знать и понимать, что в мобильных браузерах нет таких событий как клик мыши или наведение указателя мыши.
В мобильных браузерах есть «ТАБы» - это прикосновение к сенсору пальцем. Что касается поддержки браузерами событий, происходящих при использовании мобильных устройств, то осветим этот вопрос на примере события TouchEvent: для этого зайдем на сайт caniuse.com.
И мы увидим, что TouchEvent поддерживается не только мобильными браузерами Android Browser, Opera Mobile, Chrome for Android и другими, но и "десктопными" Firefox, Chrome, Opera (здесь не все версии и в этот список не входит IE и Safari, но это не страшно).
TouchEvent - Способ регистрации того, когда, где и как осуществляется касание интерфейса, для устройств с сенсорным экраном. Эти события DOM похожи на mousedown, mousemove и т.д.
mousedown/mouseup - кнопка мыши нажата/отпущена над элементом. mousemove - каждое движение мыши над элементом генерирует это событие.
Шесть событий на мобильном браузере
Итак, какие события существуют в мобильном браузере? Их шесть и все они начинаются со слова «touch».
- touchstart - Событие срабатывает при возникновении касания к элементу (палец коснулся элемента).
- touchmove - Событие возникает после того как пользователь прикоснулся к элементу, и перемещает палец в другую точку.
- touchend - Событие возникает после разрыва прикосновения к элементу (палец оторвался от элемента).
- touchenter - Событие возникает при условии, что касание происходит в пределах элемента (например, мы ведем палец по экрану и попадаем в область элемента, для которого назначено событие).
- touchleave - Событие возникает, когда точка соприкосновения выходит за рамки элемента (палец вышел за пределы элемента).
- touchcancel - Событие возникает тогда, когда точка соприкосновения больше не регистрируется на поверхности (перемещение за пределы браузера).
События touchstart, touchmove и touchend - Пример
HTML-код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>mobile_events</title>
<style>
body {
height: 1000px;
}
.box {
width: 150px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
Touch me!
</div>
<script src="script.js"></script>
</body>
</html>
Напомним, что здесь выполнение скрипта происходит после загрузки DOM-дерева, то есть после того, как произошло событие DOMContentLoaded.
JavaScript-код
'use strict';
// Запуск скрипта после загрузки DOM-дерева - событие DOMContentLoaded
window.addEventListener('DOMContentLoaded', () => {
const box = document.querySelector('.box');
// Событие touchstart - Вывод информации в консоль при возникновении касания элемента страницы
box.addEventListener('touchstart', (e) => {
e.preventDefault(); // отмена стандартного поведения браузера
console.log('Start');
});
// Событие touchmove - Перемещение в пределах элемента
box.addEventListener('touchmove', (e) => {
e.preventDefault();
console.log('Move');
});
// Событие touchend - Отрываем палец от элемента
box.addEventListener('touchend', (e) => {
e.preventDefault();
console.log('End');
});
});
Результат в Браузере
Результат в консоли
Start
40 Move
End
Для тестирования следует перейти в "Инструменты разработчиков" и активировать эмулятор мобильных устройств, кликнув по иконке "Toggle device toolbar". При этом обычный курсор мыши превращается в круговой «сенсорный» курсор. Таким образом...
-
Событие touchstart - для эмуляции касания пальцем на сенсорном экране - нужно сделать клик мыши по элементу.
-
Событие touchmove - для эмуляции прикосновения и перемещения пальца - нужно сделать клик мыши по элементу и, не отпуская кнопку мыши, переместить круговой «сенсорный» курсор.
-
Событие touchend - для эмуляции разрыва прикосновения с элементом - нужно сделать клик по элементу и отпустить/отжать кнопку мыши.
В результате в консоли мы увидим Start, (40) Move, End - то есть мы коснулись элемента (Start - Событие touchstart), не отпуская пальца перемещаемся по элементу (Move - Событие touchmove) и отрываем палец от элемента (End -Событие touchend).
Свойство touches объекта события - Объект TouchList
У объекта события есть свойства, которые можно как-то использовать при работе с сенсорными устройствами. Рассмотрим одно из них - это свойство touches.
Свойство touches - выдает количество пальцев, которые взаимодействуют с экраном.
JavaScript-код
'use strict';
window.addEventListener('DOMContentLoaded', () => {
const box = document.querySelector('.box');
// Событие touchstart - Вывод информации в консоль при касании элемента страницы
box.addEventListener('touchstart', (e) => {
e.preventDefault();
console.log(e.touches); // Свойства touches объекта события
});
});
Результат в Браузере
Результат в консоли
TouchList {0: Touch, length: 1}
0: Touch
clientX: 86.66667175292969
clientY: 81.33333587646484
force: 1
identifier: 0
pageX: 86.66667175292969
pageY: 81.33333587646484
radiusX: 15.333333015441895
radiusY: 15.333333015441895
rotationAngle: 0
screenX: 814
screenY: 229
target: div.box
[[Prototype]]: Touch
length: 1
[[Prototype]]: TouchList
item: ? item()
length: (...)
constructor: ? TouchList()
Symbol(Symbol.iterator): ? values()
Symbol(Symbol.toStringTag): "TouchList"
get length: ? length()
[[Prototype]]: Object
Свойство touches вызывает объект TouchList. Сначала в объекте TouchList мы видим количество пальцев, которые взаимодействуют с экраном, но в данном случае с конкретным элементом. С каким - это можно увидеть далее: строка №14 target: div.box. И в данном случае мы видим, что с элементом взаимодействовал один палец length: 1, так как работа ведется на эмуляторе мобильных устройств в обычном "десктопном" браузере.
Здесь же мы можем увидеть координаты, где произошло касание и другие вещи.
Свойства targetTouches и changedTouches
Свойство targetTouches - выдает количество пальцев, которые взаимодействуют с элементом сенсорного экрана.
Так как работа ведется на эмуляторе мобильных устройств - в обычном "десктопном" браузере, то нам не удастся продемонстрировать разницу между свойствами touches и targetTouches.
Поэтому если в примере выше вместо свойства touches обратиться к свойству targetTouches console.log(e.targetTouches); - то ничего не измениться: в консоли будет все тот же результат.
Но на мобильных устройствах все будет иначе.
Но рассмотрим пример: как мы можем отслеживать событие touchmove (перемещение пальца) при помощи свойства targetTouches.
JavaScript-код
'use strict';
window.addEventListener('DOMContentLoaded', () => {
const box = document.querySelector('.box');
//Событие touchmove - Перемещение в пределах элемента
box.addEventListener('touchmove', (e) => {
e.preventDefault();
// Вывод координаты pageX при перемещении первого пальца
console.log(e.targetTouches[0].pageX);
});
});
Результат в Браузере
Результат в консоли
130.6666717529297
2 128
126.66667175292969
2 125.33333587646484
124
122.66667175292969
121.33333587646484
Здесь мы отслеживаем событие touchmove - получаем координату pageX при перемещении 1-го пальца в пределах элемента: targetTouches[0] - обращение к первому пальцу.
Свойство changedTouches - выдает список пальцев, которые участвуют в текущем событии. Например, если речь идет о событии touchend, то список будет содержать тот палец, который был убран.
Как работает свойство changedTouches - здесь продемонстрировать не удастся.
Так как работа ведется на эмуляторе мобильных устройств - в обычном "десктопном" браузере.
