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

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

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

Подія touchend відправляється навіть у випадках, коли палець піднято після жесту перетягування або проведення. У обробнику цієї події розробник отримує доступ до об'єкта події, який надає інформацію про останній сеанс торкання через властивості touches, targetTouches та changedTouches. Ця інформація може бути корисною для розпізнавання кінця взаємодії або реалізації відповідних реакцій на завершення жестів.

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

Ось приклад використання touchend для завершення жесту перетягування:

element.addEventListener('touchend', function(event) {
  console.log('Торкання завершено');
  // Завершення дій після перетягування
  finishDrag();
});

В обробнику цієї події можна використовувати властивість changedTouches, яка містить список усіх точок торкання, що змінили свій стан під час події. Важливо пам'ятати, що після спрацювання touchend усі активні дії, пов'язані з торканням, мають бути завершені, щоб уникнути збоїв у роботі застосунку.

правити

Порада

При роботі з подією touchend не забувайте перевіряти інформацію про інші торкання, що залишилися на екрані. Наприклад, у випадку багатоконтактних дій можна скористатися властивостями touches або targetTouches для відстеження активних контактів.

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

Порада

На відміну від миші, події торкання можуть відбуватися одночасно з кількома пальцями. Тому потрібно враховувати, що навіть після завершення однієї точки торкання інші можуть залишатися активними. Це означає, що подія touchend може бути лише частиною великої взаємодії.

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

Порада

Для поліпшення UX під час розробки мобільних додатків можна використовувати touchend для відміни дій, якщо користувач швидко торкається та піднімає палець. Наприклад, реалізувати подвійне натискання, якщо проміжок між подіями touchstart та touchend є дуже коротким.

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

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

Синтаксис

element.addEventListener('touchend', function(event) {
 // Обробка події
});

Переглядачі

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

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

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

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

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

Приклади

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

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

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

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('Жест проведення виявлено');
  }
});

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

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

let tapTimeout;

element.addEventListener('touchstart', function(event) {
  if (tapTimeout) {
    clearTimeout(tapTimeout);
  }
});

element.addEventListener('touchend', function(event) {
  tapTimeout = setTimeout(function() {
    console.log('Одноразове торкання виявлено');
  }, 300);
});