Bagaimana untuk Mengesan Leret Jari Pengguna dengan JavaScript pada iPhone dan Android?

Cara Mengesan Leret Jari dalam JavaScript pada iPhone dan Android

Apabila membangunkan aplikasi web mesra mudah alih, mengesan gerak isyarat pengguna seperti leretan jari adalah penting untuk mencipta antara muka yang intuitif dan responsif. Panduan ini menyediakan penyelesaian menyeluruh yang membolehkan anda mengesan leretan jari dalam kedua-dua peranti iPhone dan Android menggunakan JavaScript.

Untuk mengesan leretan jari, kami memanfaatkan pendengar acara sentuh dalam JavaScript. Berikut ialah contoh coretan kod untuk membantu anda bermula:

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)) { /*most significant*/
    if (xDiff > 0) {
      /* right swipe */
    } else {
      /* left swipe */
    }
  } else {
    if (yDiff > 0) {
      /* down swipe */
    } else {
      /* up swipe */
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
}

Coretan kod ini mendengar acara 'touchstart' dan 'touchmove', menangkap kedudukan sentuhan awal serta kedudukan yang dikemas kini semasa pergerakan. Dengan membandingkan perbezaan x dan y, kita boleh menentukan arah leretan. Sama ada leret ke kanan, kiri, atas atau bawah, kod ini menyediakan penyelesaian yang mantap untuk mengesan leretan jari.

Pendekatan ini telah diuji dan disahkan untuk berfungsi dengan berkesan pada peranti Android. Dengan memasukkannya ke dalam pangkalan kod JavaScript anda, anda boleh mencipta pengalaman web yang mengutamakan mudah alih yang menggembirakan pengguna dengan interaksi yang lancar dan dipacu gerak isyarat.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Leret Jari Pengguna dengan JavaScript pada iPhone dan Android?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!