Cara Mengesan Leretan Jari pada Peranti Mudah Alih Menggunakan JavaScript

Kesan Leret Jari pada iPhone dan Android Menggunakan JavaScript

Mengesan leretan jari pada halaman web adalah penting untuk mencipta pengalaman mudah alih interaktif. Artikel ini meneroka penyelesaian JavaScript serba boleh yang berfungsi dengan lancar pada kedua-dua peranti iPhone dan Android.

Untuk mengesan leretan jari:

1. Laksanakan pendengar acara untuk acara touchstart dan touchmove.
2. Jejak kedudukan sentuhan awal dalam pembolehubah xDown dan yDown.
3. Gunakan getTouches() untuk menormalkan peristiwa sentuhan merentas penyemak imbas yang berbeza.
4. Dalam fungsi handleTouchMove, kira perbezaan antara permulaan dan semasa kedudukan sentuh.
5. Semak sama ada pergerakan mendatar (perbezaan X) atau menegak (perbezaan Y) adalah lebih ketara.
6. Berdasarkan perbezaan, tentukan arah leret (kiri, kanan, atas, atau ke bawah).

Berikut ialah contoh kod JavaScript yang mudah untuk melaksanakan penyelesaian ini:

<code class="js">document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches || evt.originalEvent.touches;
}

function handleTouchStart(evt) {
  const firstTouch = getTouches(evt)[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
}

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      /* right swipe */
    } else {
      /* left swipe */
    }
  } else {
    if (yDiff > 0) {
      /* down swipe */
    } else {
      /* up swipe */
    }
  }

  /* reset values */
  xDown = null;
  yDown = null;
}</code>

Kod ini telah berjaya diuji pada peranti Android. Dengan menggunakan teknik JavaScript ini, anda boleh mengesan leretan jari dengan mudah dan meningkatkan pengalaman pengguna aplikasi web mudah alih anda.

Atas ialah kandungan terperinci Cara Mengesan Leretan Jari pada Peranti Mudah Alih Menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!