iPhone と Android で JavaScript を使用してユーザーの指のスワイプを検出するにはどうすればよいですか?

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

モバイル フレンドリーな Web アプリケーションを開発する場合、指のスワイプなどのユーザー ジェスチャを検出する直感的で応答性の高いインターフェイスを作成するためには非常に重要です。このガイドでは、JavaScript を使用して iPhone と Android デバイスの両方で指のスワイプを検出できるようにする包括的なソリューションを提供します。

指のスワイプを検出するには、JavaScript のタッチ イベント リスナーを利用します。開始するためのサンプル コード スニペットは次のとおりです。

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)) { /*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;
}

このコード スニペットは、「touchstart」イベントと「touchmove」イベントをリッスンし、最初のタッチ位置と移動中の更新位置をキャプチャします。 x と y の差を比較することで、スワイプの方向を決定できます。右、左、上、下のいずれのスワイプであっても、このコードは指のスワイプを検出するための堅牢なソリューションを提供します。

このアプローチは、Android デバイスで効果的に動作することがテストおよび検証されています。これを JavaScript コードベースに組み込むことで、流動的でジェスチャー主導のインタラクションでユーザーを喜ばせるモバイルファーストの Web エクスペリエンスを作成できます。

以上がiPhone と Android で JavaScript を使用してユーザーの指のスワイプを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。