JS властивість Event.touchmove

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

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

Об'єкт події touchmove містить кілька корисних властивостей, таких як touches, targetTouches та changedTouches. Вони надають інформацію про всі активні точки торкання на екрані. Наприклад, touches включає всі точки торкання на поточному елементі, тоді як changedTouches містить лише ті, які змінили свій стан з моменту останньої події. Ця подія може бути використана для реалізації перетягувань, прокручування або жестів, що базуються на позиції пальця.

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

Приклад використання події touchmove:

element.addEventListener('touchmove', function(event) {
  let touch = event.touches[0];  // Отримуємо інформацію про перший палець
  console.log('Координати пальця: X: ' + touch.clientX + ', Y: ' + touch.clientY);
  // Динамічне оновлення положення елементів
});

У цьому прикладі ми відслідковуємо координати пальця під час його переміщення по екрану. Це може бути використано для створення інтерфейсів з динамічним оновленням положення елементів.

правити

Порада

У випадку роботи з багатократними торканнями (multitouch), слід обробляти кожен палець окремо. Це дозволяє реалізувати складні жести, наприклад, масштабування або обертання елементів.

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

Порада

Щоб уникнути прокручування сторінки при обробці touchmove (особливо на мобільних пристроях), можна використовувати event.preventDefault(). Це дозволяє запобігти поведінці браузера за замовчуванням, наприклад, прокрутці сторінки під час жесту.

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

Порада

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

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

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

Синтаксис

element.addEventListener('touchmove', function(event) {
 // Обробка події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

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

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

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

const element = document.getElementById('demo-element');

let isDragging = false;

element.addEventListener('touchstart', function(event) {
  isDragging = true;
});

element.addEventListener('touchmove', function(event) {
  if (isDragging) {
    let touch = event.touches[0];
    console.log('Перетягування на координати: X: ' + touch.clientX + ', Y: ' + touch.clientY);
    // Логіка перетягування елементу
  }
});

element.addEventListener('touchend', function() {
  isDragging = false;
});

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

const element = document.getElementById('demo-element');

let startX, startY;

element.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
});

element.addEventListener('touchmove', function(event) {
  let touch = event.touches[0];
  let deltaX = touch.clientX - startX;
  let deltaY = touch.clientY - startY;

  if (Math.abs(deltaX) > 30 || Math.abs(deltaY) > 30) {
    console.log('Жест проведення');
    // Реалізація логіки для свайпу
  }
});