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 є важливим інструментом для розробки додатків, орієнтованих на мобільні пристрої, що дозволяє створювати багаті користувацькі інтерфейси з підтримкою жестів і мультитач.
| Порада: | При роботі з декількома точками дотику звертайте увагу на ідентифікатор |
| Порада: | При використанні жестів, таких як "зумування" або "поворот", вам необхідно відстежувати зміни координат між двома або більше дотиками. За допомогою |
| Порада: | Під час роботи з подіями мультитач важливо відстежувати не тільки початкову точку дотику, але й рух кожного пальця. Для цього можна комбінувати події |
Синтаксис
event.targetTouchesЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
22 |
52 |
- |
15 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
25 |
6 |
3.2 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми відстежуємо два дотики на елементі та обчислюємо відстань між ними під час руху пальців. Це корисно для реалізації жестів типу "щипок" для зумування, коли користувач зближує або розводить пальці.
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`);
}
});Цей приклад демонструє, як можна відслідковувати конкретну кількість дотиків для ініціації певної дії. У даному випадку, коли користувач торкається елемента трьома пальцями, спрацьовує подія, яка може використовуватись для складних жестів або спеціальних функцій.
element.addEventListener('touchstart', function(event) {
if (event.targetTouches.length === 3) {
console.log('Активовано трьохпальцевий жест!');
}
});