JavaScript を使用してモバイル Web ページで指のスワイプ方向を検出する方法 (iPhone/Android 互換性)?

モバイル Web ページでの指のスワイプの検出

今日のモバイル中心の世界では、すべてのデバイスで直感的で応答性の高い Web エクスペリエンスを提供することが重要です。ユーザーは、iPhone と Android スマートフォンの両方でスムーズなナビゲーションと対話を期待しています。モバイル ナビゲーションに不可欠な一般的なジェスチャの 1 つは、指のスワイプです。

問題: JavaScript を使用して Web ページ上でユーザーの指のスワイプ方向を正確に検出し、iPhone と Android デバイス間の互換性を確保するにはどうすればよいですか。 ?

解決策: 幸いなことに、最新のブラウザーには、開発者がタッチ イベントを追跡できる JavaScript API が提供されています。プロジェクトに組み込むことができる簡単な Vanilla JS コード スニペットを次に示します。

<code class="javascript">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 フォンの両方のモバイル ユーザーのユーザー エクスペリエンスを向上させます。

以上がJavaScript を使用してモバイル Web ページで指のスワイプ方向を検出する方法 (iPhone/Android 互換性)?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。