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

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

Подія touchcancel виникає, коли поточний сеанс торкання екрана переривається через непередбачені обставини, такі як системні переривання або зміна контексту. Зазвичай це відбувається, коли пристрій вирішує завершити взаємодію торкання, наприклад, коли відбувається зміна фокусу або з'являється системне сповіщення.

Для роботи з подією touchcancel, програмісти використовують метод addEventListener, щоб додати обробник події до елементів, які реагують на торкання. В обробнику ви можете отримати доступ до об'єкта події, який містить інформацію про сеанс торкання, що було скасоване, через властивості touches, targetTouches та changedTouches.

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

element.addEventListener('touchcancel', function(event) {
  console.log('Торкання було скасоване');
  // Очищення інтерфейсу або скидання дій
});

Коли подія touchcancel спрацьовує, вона часто містить обмежену кількість інформації порівняно з іншими подіями торкання, такими як touchmove. Тому важливо грамотно обробляти її, особливо у випадках, коли ви вже почали обробляти інші події торкання.

При обробці події слід пам'ятати, що вона не завжди гарантує наявність конкретної причини для скасування, тому її потрібно використовувати для загальної обробки випадкових скасувань.

правити

Порада

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

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

Порада

Для кросбраузерної сумісності переконайтеся, що перевіряєте підтримку події touchcancel, особливо у старих версіях мобільних браузерів. Хоча більшість сучасних браузерів її підтримують, ви можете додатково обробляти події на випадок відсутності підтримки.

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

Порада

Щоб уникнути проблем із продуктивністю, подію touchcancel потрібно обробляти якнайшвидше. Якщо під час обробки події викликаються ресурсоємні функції, це може призвести до уповільнення взаємодії користувача з інтерфейсом.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

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

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

element.addEventListener('touchcancel', function(event) {
  // Скасування анімації
  cancelAnimationFrame(animationId);
  console.log('Анімація була зупинена через скасування торкання');
});

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

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

element.addEventListener('touchcancel', function(event) {
  // Відміна жесту "перетягування"
  resetDragState();
  console.log('Жест перетягування було скасовано');
});