iPhone と Android の JavaScript で指のスワイプ方向を検出および決定する方法

iPhone と Android での JavaScript での指のスワイプの検出

今日のモバイル中心の世界では、さまざまなデバイスでシームレスなユーザー エクスペリエンスを提供することが不可欠です。使いやすさに大きく貢献する側面の 1 つは、Web アプリケーションでの指のスワイプを検出する機能です。この記事では、iPhone と Android の両方のプラットフォームでこの課題に対処するバニラ JS ソリューションを紹介します。

ユーザーのスワイプの識別

JavaScript で指のスワイプを検出するには、「タッチスタート」のイベント リスナーを利用します。そして「タッチムーブ」。これらのリスナーは、最初のタッチ ポイント (xDown、yDown) を追跡し、その後のタッチの動きを監視します。

スワイプ方向の決定

スワイプ方向を特定する鍵は、スワイプ方向を識別する鍵は、スワイプ中にタッチ ポイント間の差を計算することにあります。 「タッチムーブ」イベント。この差を x 軸と y 軸の両方で比較することで、最も重要な動きを確認できます。

• x 軸の差が y 軸の差よりも大きい場合: 水平スワイプが発生しました。 .
• それ以外の場合は、垂直スワイプが行われています。

これらの計算に基づいて、スワイプを次のように分類できます。

• 水平スワイプ: 左または右
• 垂直スワイプ: 上または下

サンプル コード

次のコード スニペットは、簡単なコードを提供します。スワイプ検出の効果的な実装:

<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>

このコード サンプルは、Android デバイスで正常にテストされています。

ブラウザの互換性

提供されたソリューションは、次のブラウザと互換性があります。 iPhone と Android の両方:

• Safari
• Chrome
• Firefox

結論

この JavaScript ソリューションにより、 iPhone および Android デバイスで指のスワイプを効率的に検出できます。タッチ ジェスチャに自然に応答する、より直観的でユーザー フレンドリーな Web アプリケーションを構築するための堅牢な基盤を提供します。

以上がiPhone と Android の JavaScript で指のスワイプ方向を検出および決定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。