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), слід обробляти кожен палець окремо. Це дозволяє реалізувати складні жести, наприклад, масштабування або обертання елементів. |
| Порада: | Щоб уникнути прокручування сторінки при обробці |
| Порада: | Оптимізація обробки події також включає скидання непотрібних дій, якщо рух завершено або відбувається занадто повільно. Це допоможе запобігти затримкам у роботі інтерфейсу та уникнути непотрібної обробки подій. |
Синтаксис
element.addEventListener('touchmove', function(event) {
// Обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі ми реалізували простий механізм перетягування елементу. Подія touchstart активує режим перетягування, а подія touchmove дозволяє динамічно змінювати координати під час руху пальця. touchend завершує перетягування.
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;
});У цьому прикладі ми визначаємо простий жест проведення (свайпу). Відстежуємо початкову точку торкання за допомогою touchstart і порівнюємо її з поточною позицією під час touchmove. Якщо різниця перевищує певний поріг, можемо вважати, що відбувся свайп, і виконати відповідні дії.
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('Жест проведення');
// Реалізація логіки для свайпу
}
});