モバイル 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 サイトの他の関連記事を参照してください。