JavaScriptでタッチ操作時に処理を追加するのに便利なtouchstart・touchmove・touchendイベントの使い方

タッチ操作時に処理を追加する

JavaScriptでタッチ操作時に処理を追加する場合はtouchstarttouchmovetouchendイベントを利用します。

イベント

イベント発生タイミング
touchstartタッチを開始した時
touchmoveタッチポイントを動かした時
touchendタッチを終了した時
タッチ操作関連のイベント

サンプルコード

サンプルコードとして、タッチ操作を行った時に、その処理に応じて文字列を出力するサンプルコードを紹介します。

Output

タッチデバイスで操作してください

Pug
#box
		p タッチデバイスで操作してください
	#targetText 
CSS
#box {
	width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  overflow: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
JavaScript
const targetBox = document.getElementById('box');
const targetText = document.getElementById('targetText');

targetBox.addEventListener('touchstart', () => {
  targetText.textContent = 'タッチ開始しました';
});

targetBox.addEventListener('touchmove', () => {
  targetText.textContent = 'タッチ移動しました';
});

targetBox.addEventListener('touchend', () => {
  targetText.textContent = 'タッチ終了しました';
});
インストラクター
コメント

コメントを残す