JS об'єкт Touch

Загальний опис

Touch Events — це API в JavaScript, що дозволяє розробникам взаємодіяти з сенсорними екранами шляхом відстеження дій користувачів, таких як дотик, свайп, масштабування чи прокрутка. Цей API створений для роботи з багатотач (multitouch) пристроями, включаючи смартфони, планшети та інші гаджети із сенсорними екранами. Touch Events забезпечують потужний інструментарій для побудови інтерактивних інтерфейсів, які реагують на жести.

Touch Events включають кілька ключових подій:

touchstart: Виникає, коли палець торкається екрана. Ця подія є початковою точкою взаємодії.
touchmove: Генерується під час переміщення пальця по екрану. Вона часто використовується для обробки свайпів або жестів.
touchend: Викликається, коли користувач забирає палець з екрана, завершуючи дотик.
touchcancel: Виникає, якщо дотик перерваний через системне втручання (наприклад, вхідний дзвінок або інша перешкода).

Об’єкт TouchEvent, який передається до обробників цих подій, містить кілька важливих властивостей:

touches: Колекція всіх точок дотику, активних у даний момент.
targetTouches: Список точок дотику, які взаємодіють із конкретним елементом DOM.
changedTouches: Містить точки дотику, що змінилися в результаті події (наприклад, додавання чи забір пальця).

Для роботи з TouchEvent слід пам'ятати про координати точок дотику, які доступні через властивості кожного об’єкта Touch:

clientX та clientY — координати в межах видимої області браузера.
pageX та pageY — координати відносно всієї сторінки.

Приклад:

element.addEventListener('touchstart', (event) => {
  console.log('Дотик на координатах:', event.touches[0].clientX, event.touches[0].clientY);
});

Ці події є асинхронними і дозволяють відстежувати багатоканальні дотики. Наприклад, за допомогою touches.length можна дізнатися, скільки пальців одночасно торкаються екрана, що корисно для жестів масштабування або обертання.

Порада:	`Touch Events` мають велике значення для розробки мобільних інтерфейсів, але їх підтримка залежить від пристрою та браузера. Щоб забезпечити сумісність, часто рекомендується комбінувати `Touch Events` з `Mouse Events` (`mousedown`, `mousemove`, `mouseup`) для роботи на пристроях без сенсорного екрану.
Порада:	Тримайте код обробників подій максимально простим, особливо для `touchmove`, щоб уникнути затримок. Для складних обчислень використовуйте `requestAnimationFrame()`.
Порада:	Слухайте подію `touchcancel`, щоб обробити перервані дотики. Наприклад, якщо користувач покидає екран під час свайпу, можна відмінити поточну взаємодію.

Синтаксис

element.addEventListener('touchstart', (event) => {
    // Ваш код
});

element.addEventListener('touchmove', (event) => {
    // Ваш код
});

element.addEventListener('touchend', (event) => {
    // Ваш код
});

element.addEventListener('touchcancel', (event) => {
    // Ваш код
});

Переглядачі

Переглядач
	22	52	-	15	79

Переглядач
	4.4	25	6	3.2

Переглядач
	-	-

Цей приклад реалізує свайпи вліво та вправо для переходу між елементами галереї. Відстань свайпу визначає, чи потрібно змінювати слайд.

let startX = 0;

const gallery = document.getElementById('gallery');

gallery.addEventListener('touchstart', (event) => {
    startX = event.touches[0].clientX;
});

gallery.addEventListener('touchend', (event) => {
    const endX = event.changedTouches[0].clientX;
    if (startX - endX > 50) {
        console.log('Свайп вліво');
    } else if (endX - startX > 50) {
        console.log('Свайп вправо');
    }
});

Цей приклад дозволяє користувачу малювати пальцем на екрані. Коли палець рухається, координати дотику використовуються для створення синіх кіл на полотні.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('touchmove', (event) => {
    const touch = event.touches[0];
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(touch.clientX, touch.clientY, 5, 0, 2 * Math.PI);
    ctx.fill();
});

Методи

Властивості

altKey: Вказує, чи була натиснута клавіша Alt під час виникнення події дотику. Застосовується для створення комбінацій дотиків із клавішами.
changedTouches: Список точок дотику, які змінили свій стан під час поточної події (наприклад, припинення дотику). Використовується для відстеження окремих дотиків у мультитач-сценаріях.
ctrlKey: Вказує, чи була натиснута клавіша Ctrl під час виникнення події. Використовується для реалізації складних жестів або комбінацій.
metaKey: Вказує, чи була натиснута клавіша Meta (Command на Mac або Windows на Windows) під час події дотику. Корисно для створення специфічних дій на різних платформах.
shiftKey: Вказує, чи була натиснута клавіша Shift під час виникнення події дотику. Використовується для модифікованих жестів чи функцій.
targetTouches: Список точок дотику, які знаходяться на елементі, що викликав подію. Корисно для визначення дотиків, специфічних для конкретного елемента.
touches: Містить список усіх активних точок дотику на поточному екрані під час події. Ця властивість надає об’єкт `TouchList`, який включає всі дотики, незалежно від того, чи вони пов’язані з певним елементом. Використовується для обробки мультитач-сценаріїв, таких як масштабування чи обертання.

JS довідник

Events

JavaScript

Statements

Наповнення JS розділу