touchmoveとは？
touchmove()イベントは、タッチデバイスにおいて、要素をタップしたまま指を移動させるだけで発火するイベントです。スクロールやスワイプなどの操作に反応し、Webサイトやアプリにインタラクティブな要素を追加することができます。他のタッチイベントと比べると使う頻度は少ないかもしれませんが、知識として覚えておきましょう！
touchmove()イベントの基本
touchmove()イベントは、指がタッチスクリーン上を移動している間、繰り返し発火します。イベントリスナーを設定することで、このイベントを捕捉し、JavaScriptで処理を実行することができます。
touchmove()イベントの使い方
要素にtouchmoveイベントリスナーを追加するには、addEventListener()メソッドを使用します。
<div id="touch-area">タッチエリア</div>
<script>
const touchArea = document.getElementById('touch-area');
touchArea.addEventListener('touchmove', function(event) {
// タッチイベント発生時の処理
console.log('指が移動しました！');
});
</script>
イベントオブジェクト
touchmoveイベントが発生すると、イベントリスナーに関数にイベントオブジェクトが渡されます。このオブジェクトには、タッチイベントに関する情報が含まれています。重要なプロパティは以下の通りです。
| プロパティ | 説明 |
|---|---|
touches |
現在タッチされているすべてのタッチポイントのリスト |
targetTouches |
イベントリスナーが設定されている要素に現在タッチされているすべてのタッチポイントのリスト |
changedTouches |
前回のタッチイベントから状態が変化したすべてのタッチポイントのリスト |
使用例
touchmove()イベントは、以下のような場面で使用されます。
- スワイプによる画像ギャラリーの実装
- タッチ操作による描画アプリの実装
- ドラッグ＆ドロップによる要素の移動
参考資料
よくある質問
Q1: touchmove()イベントは、PCブラウザでも動作しますか？
A1: いいえ、touchmove()イベントは、タッチデバイス特有のイベントであるため、PCブラウザでは動作しません。PCブラウザでは、mousemove()イベントを使用する必要があります。
Q2: touchmove()イベントと、touchstart()イベント、touchend()イベントの違いは何ですか？
A2: touchmove()イベントは、指がタッチスクリーン上を移動している間、繰り返し発火します。一方、touchstart()イベントは、指がタッチスクリーンに触れた時に一度だけ発火し、touchend()イベントは、指がタッチスクリーンから離れた時に一度だけ発火します。
Q3: touchmove()イベントを使って、要素をスムーズに移動させるにはどうすれば良いですか？
A3: 要素をスムーズに移動させるには、CSSのtransitionプロパティを使用します。transitionプロパティを設定することで、要素の位置やサイズなどの変化をアニメーション化することができます。
その他の参考記事:jquery touchmove