Touchmoveとは何ですか？

touchmoveとは何ですか？

「touchmove」は、スマートフォンやタブレットなどのタッチデバイスにおいて、画面上で指を移動させている間、連続的に発生するタッチイベントの一つです。この記事では、touchmoveイベントの詳細と、そのイベント発生時にJavaScriptを用いてどのように制御するかについて解説します。

touchmoveイベントの概要

touchmoveイベントは、指が画面に接触したまま移動した場合に発生します。例えば、画面のスクロール、スワイプ操作、ドラッグ＆ドロップ操作などが挙げられます。デフォルトでは、touchmoveイベントが発生すると、ブラウザは画面のスクロールを行います。

イベントの発生順番

タッチイベントは、特定の順番で発生します。一般的な流れは以下の通りです。

touchstart: 指が画面に触れた瞬間に発生
touchmove: 指が画面に触れたまま移動している間、連続的に発生
touchend: 指が画面から離れた瞬間に発生
touchcancel: タッチがキャンセルされた場合に発生 (例: 電話がかかってきた場合など)

touchmoveイベントの制御

touchmoveイベントが発生した際に、デフォルトの動作 (画面のスクロール) を無効化したい場合は、イベントハンドラ内で「preventDefault()」メソッドを使用します。これにより、開発者は独自のスクロール処理やドラッグ＆ドロップなどのインタラクションを実装することができます。

JavaScriptでの実装例

以下は、touchmoveイベントを用いて要素をドラッグできる簡単な実装例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>touchmoveイベントの例</title>
<style>
  #draggable-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
</head>
<body>

<div id="draggable-box"></div>

<script>
  const box = document.getElementById('draggable-box');
  let boxX = 0;
  let boxY = 0;

  box.addEventListener('touchstart', (e) => {
    const touch = e.touches[0];
    boxX = touch.clientX - box.offsetLeft;
    boxY = touch.clientY - box.offsetTop;
  });

  box.addEventListener('touchmove', (e) => {
    e.preventDefault(); // デフォルトのスクロールを無効化
    const touch = e.touches[0];
    box.style.left = touch.clientX - boxX + 'px';
    box.style.top = touch.clientY - boxY + 'px';
  });
</script>

</body>
</html>

touchイベントで取得できる情報

touchイベントオブジェクトからは、タッチに関する様々な情報が取得できます。主なプロパティは以下の通りです。

プロパティ	説明
touches	現在タッチされているすべての指の情報を持つTouchオブジェクトの配列
targetTouches	イベントリスナーが設定された要素に現在タッチされているすべての指の情報を持つTouchオブジェクトの配列
changedTouches	直前のタッチイベントから状態が変化したすべての指の情報を持つTouchオブジェクトの配列

注意点

touchmoveイベントは、高頻度で発生するため、処理が重くなりすぎないように注意が必要です。
すべてのブラウザがtouchイベントに対応しているわけではありません。クロスブラウザ対応のためには、mouseイベントと組み合わせるなどの対応が必要です。

参考資料

Touch events - Web API | MDN

touchmoveとは何ですか？

touchmoveイベントの概要

イベントの発生順番

touchmoveイベントの制御

JavaScriptでの実装例

touchイベントで取得できる情報

注意点

参考資料

関連する質問と回答

Q1: touchmoveイベントとmousemoveイベントの違いは何ですか？

Q2: touchmoveイベントで取得できる座標は、画面全体に対するものですか？

Q3: touchmoveイベントをキャンセルするにはどうすればよいですか？