JS властивість Event.touchend
Загальний опис
Подія touchend спрацьовує, коли користувач піднімає палець або завершено контакт із сенсорним екраном, після того як він був торкнутий. Це означає, що торкання закінчується, і більше не відстежується. Вона є частиною механізму обробки жестів на мобільних пристроях і часто використовується разом із подіями touchstart та touchmove.
Подія touchend відправляється навіть у випадках, коли палець піднято після жесту перетягування або проведення. У обробнику цієї події розробник отримує доступ до об'єкта події, який надає інформацію про останній сеанс торкання через властивості touches, targetTouches та changedTouches. Ця інформація може бути корисною для розпізнавання кінця взаємодії або реалізації відповідних реакцій на завершення жестів.
При використанні touchend важливо враховувати, що після завершення торкання вам може знадобитися скинути або завершити будь-які проміжні дії, які почалися під час подій touchstart або touchmove. Наприклад, можна скасувати анімацію або завершити перетягування елементів.
Ось приклад використання touchend для завершення жесту перетягування:
element.addEventListener('touchend', function(event) {
console.log('Торкання завершено');
// Завершення дій після перетягування
finishDrag();
});
В обробнику цієї події можна використовувати властивість changedTouches, яка містить список усіх точок торкання, що змінили свій стан під час події. Важливо пам'ятати, що після спрацювання touchend усі активні дії, пов'язані з торканням, мають бути завершені, щоб уникнути збоїв у роботі застосунку.
| Порада: | При роботі з подією |
| Порада: | На відміну від миші, події торкання можуть відбуватися одночасно з кількома пальцями. Тому потрібно враховувати, що навіть після завершення однієї точки торкання інші можуть залишатися активними. Це означає, що подія |
| Порада: | Для поліпшення UX під час розробки мобільних додатків можна використовувати |
Синтаксис
element.addEventListener('touchend', function(event) {
// Обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Тут ми реалізуємо функцію для обробки одноразового торкання. Якщо між подіями touchstart і touchend проходить менше 300 мілісекунд, виконується одноразова дія. Це допомагає відрізнити одноразове торкання від подвійного клацання або інших складних жестів.
let tapTimeout;
element.addEventListener('touchstart', function(event) {
if (tapTimeout) {
clearTimeout(tapTimeout);
}
});
element.addEventListener('touchend', function(event) {
tapTimeout = setTimeout(function() {
console.log('Одноразове торкання виявлено');
}, 300);
});У цьому прикладі ми визначаємо координати торкання при подіях touchstart і touchend. Якщо різниця в координатах достатньо велика, це може означати, що користувач здійснив жест проведення. Це корисно для реалізації свайпів у мобільних додатках.
let startX, startY, endX, endY;
element.addEventListener('touchstart', function(event) {
startX = event.touches[0].clientX;
startY = event.touches[0].clientY;
});
element.addEventListener('touchend', function(event) {
endX = event.changedTouches[0].clientX;
endY = event.changedTouches[0].clientY;
if (Math.abs(startX - endX) > 50 || Math.abs(startY - endY) > 50) {
console.log('Жест проведення виявлено');
}
});