JS об'єкт TouchEvent

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

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

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

• 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 можна дізнатися, скільки пальців одночасно торкаються екрана, що корисно для жестів масштабування або обертання.

правити

Порада

Тримайте код обробників подій максимально простим, особливо для touchmove, щоб уникнути затримок. Для складних обчислень використовуйте requestAnimationFrame().

автор: Bond правити

Порада

Слухайте подію touchcancel, щоб обробити перервані дотики. Наприклад, якщо користувач покидає екран під час свайпу, можна відмінити поточну взаємодію.

автор: Bond правити

Порада

TouchEvent мають велике значення для розробки мобільних інтерфейсів, але їх підтримка залежить від пристрою та браузера. Щоб забезпечити сумісність, часто рекомендується комбінувати TouchEvent з MouseEvent (mousedown, mousemove, mouseup) для роботи на пристроях без сенсорного екрану.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<canvas id="canvas" width="300" height="150"></canvas>

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();
});

<div id="gallery">Демонстраційний елемент</div>

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('Свайп вправо');
    }
});