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 краще одразу змінити стан інтерфейсу або запустити анімацію. Це дозволить швидше реагувати на дії користувача та забезпечить плавнішу роботу.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.addEventListener('touchstart', 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');

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('Жест проведення розпочато');
    // Логіка свайпу
  }
});

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

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

let startX, startY;

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