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

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

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

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

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

Приклад використання події touchstart:

element.addEventListener('touchstart', function(event) {
  let touch = event.touches[0];  // Отримуємо перший дотик
  console.log('Координати старту: X: ' + touch.clientX + ', Y: ' + touch.clientY);
  // Ініціація дій на основі початкового торкання
});

Цей приклад демонструє, як можна відслідковувати координати торкання, коли користувач взаємодіє з екраном. Це може бути корисним для перетягування або інших дій, які залежать від початкового торкання.

Обробка touchstart часто доповнюється іншими подіями, такими як touchmove та touchend, для створення повноцінної логіки обробки жестів.

Порада:	Якщо ваш додаток реагує на торкання, зокрема на перетягування, після події `touchstart` краще одразу змінити стан інтерфейсу або запустити анімацію. Це дозволить швидше реагувати на дії користувача та забезпечить плавнішу роботу.
Порада:	Не забувайте використовувати `event.preventDefault()` для запобігання прокручуванню або іншій поведінці за замовчуванням, якщо це необхідно. Це корисно, коли ви створюєте додатки, де сенсорні жести є основним способом навігації або взаємодії.
Порада:	Щоб підвищити продуктивність під час обробки подій `touchstart`, рекомендується оптимізувати функції, що викликаються. Наприклад, для тривалих операцій краще використовувати асинхронні механізми або `requestAnimationFrame`, щоб уникнути блокування основного потоку виконання.

Синтаксис

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

Значення

Return

Переглядачі

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

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

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

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

let startX, startY;

element.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
  console.log('Початкові координати торкання: ', startX, startY);
});

У цьому прикладі ми визначаємо початкові координати під час 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) > 50 || Math.abs(deltaY) > 50) {
    console.log('Жест проведення розпочато');
    // Логіка свайпу
  }
});

JS довідник

JavaScript

Наповнення JS розділу