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 містить усі активні точки дотику, незалежно від того, чи взаємодіють вони з конкретним елементом чи ні.
Ця властивість є важливою частиною роботи з подіями мультитач, оскільки дозволяє розробникам створювати багатокористувацькі або складні інтерфейси, що реагують на дії кількох пальців одночасно.
| Порада: | Для багатопальцевих жестів завжди перевіряйте кількість дотиків за допомогою |
| Порада: | Щоб визначити положення кожної точки дотику на екрані, використовуйте |
| Порада: | Завжди використовуйте обробники подій із сенсорними пристроями, такими як телефони або планшети, щоб переконатися, що ваша логіка взаємодії враховує всі можливі сенсорні взаємодії. Браузери по-різному обробляють події дотику, тому враховуйте крос-браузерну сумісність. |
Синтаксис
event.touchesЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
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('Виявлено більше трьох дотиків!');
}
});