Bagaimana untuk Mengesan dan Menentukan Arah Leret Jari dalam JavaScript pada iPhone dan Android?

Mengesan Leretan Jari dalam JavaScript merentas iPhone dan Android

Dalam dunia tertumpu mudah alih hari ini, adalah penting untuk memberikan pengalaman pengguna yang lancar pada pelbagai peranti. Satu aspek yang menyumbang dengan ketara kepada kebolehgunaan ialah keupayaan untuk mengesan leretan jari dalam aplikasi web. Artikel ini membentangkan penyelesaian JS vanila yang menangani cabaran ini pada kedua-dua platform iPhone dan Android.

Mengenal pasti Leretan Pengguna

Untuk mengesan leretan jari dalam JavaScript, kami akan menggunakan pendengar acara untuk 'mula sentuh' dan 'touchmove'. Pendengar ini menjejaki titik sentuh awal (xDown, yDown) dan kemudian memantau pergerakan sentuhan seterusnya.

Menentukan Arah Leret

Kunci untuk mengenal pasti arah leret terletak pada pengiraan perbezaan antara titik sentuh semasa acara 'touchmove'. Dengan membandingkan perbezaan ini dalam kedua-dua paksi x dan y, kita boleh mewujudkan pergerakan yang paling ketara:

• Jika perbezaan dalam paksi x lebih besar daripada paksi y: leretan mendatar telah berlaku .
• Jika tidak, leret menegak telah berlaku.

Berdasarkan pengiraan ini, kami boleh mengkategorikan leretan sebagai:

• Mendatar Leret: Kiri atau kanan
• Leret Menegak: Atas atau bawah

Kod Contoh

Coretan kod berikut menyediakan ringkasan namun pelaksanaan pengesanan leret yang berkesan:

<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 ||             // browser API
         evt.originalEvent.touches; // jQuery
}

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;
};</code>

Sampel kod ini telah berjaya diuji pada peranti Android.

Keserasian Penyemak Imbas

Penyelesaian yang disediakan serasi dengan penyemak imbas berikut pada kedua-dua iPhone dan Android:

• Safari
• Chrome
• Firefox

Kesimpulan

Penyelesaian JavaScript ini mendayakan anda untuk mengesan leretan jari dengan cekap pada peranti iPhone dan Android. Ia menawarkan asas yang kukuh untuk membina aplikasi web yang lebih intuitif dan mesra pengguna yang bertindak balas secara semula jadi kepada gerak isyarat sentuh.

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