JavaScript を使用してモバイル デバイスでの指のスワイプを検出する方法

JavaScript を使用して iPhone および Android で指のスワイプを検出する

Web ページでの指のスワイプの検出は、インタラクティブなモバイル エクスペリエンスを作成するために重要です。この記事では、iPhone と Android デバイスの両方でシームレスに動作する多用途の JavaScript ソリューションについて説明します。

指のスワイプを検出するには:

1. touchstart イベントと touchmove イベントのイベント リスナーを実装します。
2. xDown 変数と yDown 変数で初期タッチ位置を追跡します。
3. getTouches() を使用して、さまざまなブラウザー間でタッチ イベントを正規化します。
4. handleTouchMove 関数で、初期タッチ位置と現在のタッチ位置の差を計算します。
5. 水平方向 (X 差) と垂直方向 (Y 差) のどちらの動きが大きいかを確認します。
6. その差に基づいて、スワイプ方向 (左、右、上、

このソリューションを実装するための簡単な JavaScript コード サンプルを次に示します。

<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 || 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)) {
    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 デバイスで正常にテストされています。これらの JavaScript テクニックを利用すると、指のスワイプを簡単に検出し、モバイル Web アプリケーションのユーザー エクスペリエンスを向上させることができます。

以上がJavaScript を使用してモバイル デバイスでの指のスワイプを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。