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

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

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

Кожен елемент в колекції targetTouches є об'єктом типу Touch, який містить інформацію про конкретний дотик: координати (pageX, pageY), ідентифікатор (identifier), радіус дотику та інші властивості. Це дозволяє програмісту відслідковувати як одиничні дотики, так і множинні взаємодії (наприклад, жест "щипка" для зумування).

Приклад роботи з targetTouches:

element.addEventListener('touchmove', function(event) {
  console.log(event.targetTouches.length); // Виводить кількість активних дотиків на елементі
});

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

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

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

правити

Порада

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

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

Порада

При використанні жестів, таких як "зумування" або "поворот", вам необхідно відстежувати зміни координат між двома або більше дотиками. За допомогою targetTouches ви можете отримувати точну інформацію про всі активні точки дотику на елементі.

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

Порада

Під час роботи з подіями мультитач важливо відстежувати не тільки початкову точку дотику, але й рух кожного пальця. Для цього можна комбінувати події touchstart, touchmove і touchend, а також використовувати властивість targetTouches для отримання актуальних даних.

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

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

Синтаксис

event.targetTouches

Переглядачі

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

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

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

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

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

Приклади

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

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

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

element.addEventListener('touchstart', function(event) {
  if (event.targetTouches.length === 3) {
    console.log('Активовано трьохпальцевий жест!');
  }
});

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

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

element.addEventListener('touchmove', function(event) {
  if (event.targetTouches.length === 2) {
    const touch1 = event.targetTouches[0];
    const touch2 = event.targetTouches[1];
    const distance = Math.sqrt(
      Math.pow(touch2.pageX - touch1.pageX, 2) + Math.pow(touch2.pageY - touch1.pageY, 2)
    );
    console.log(`Відстань між двома дотиками: ${distance}px`);
  }
});