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

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

touches — це властивість об'єкта TouchEvent, яка повертає список всіх точок дотику, що наразі взаємодіють з екраном. Це масивоподібний об'єкт, де кожен елемент — це об'єкт Touch, який містить інформацію про конкретну точку дотику, включаючи координати (clientX, clientY), ідентифікатор дотику (identifier), а також розмір і форму області дотику.

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

Приклад використання:

document.addEventListener('touchmove', function(event) {
  console.log(`Кількість точок дотику: ${event.touches.length}`);
});

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

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

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

правити

Порада

Для багатопальцевих жестів завжди перевіряйте кількість дотиків за допомогою touches.length. Це допоможе вам відрізнити, наприклад, "зум" з двома пальцями від звичайного прокручування одним пальцем.

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

Порада

Щоб визначити положення кожної точки дотику на екрані, використовуйте clientX і clientY, які доступні для кожного елемента в масиві touches. Це допоможе при розробці жестів, що реагують на координати дотиків.

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

Порада

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

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

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

Синтаксис

event.touches

Переглядачі

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

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

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

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

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

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

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

Приклади

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

document.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    const distance = Math.sqrt(
      Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2)
    );
    console.log(`Відстань між двома пальцями: ${distance.toFixed(2)} пікселів`);
  }
});

document.addEventListener('touchstart', function(event) {
  if (event.touches.length > 3) {
    console.log('Виявлено більше трьох дотиків!');
  }
});