JavaScriptでスマホ画面をタップした時のイベントを検知する方法
JavaScriptでスマホ画面を指で触れた時のタップイベントを検知したい。
本記事ではこのような悩みを解決します。
スマホ画面を指でタップした時
let content = document.querySelector('.content');
let text = document.querySelector('.txt');
// touchstartイベント
content.addEventListener("touchstart", () => {
text.innerHTML = '指でタップした';
})
スマホ画面を指でタップした時を検知するコード例です。
content要素エリアを指でタップしたら、txt要素エリアに【指でタップした】とテキスト表示します。
タッチイベントにはaddEventListenerを使います。
引数にtouchstartを指定することで指でタップした時を検知する事が出来ます。
指がスマホ画面から離れた時
let content = document.querySelector('.content');
let text = document.querySelector('.txt');
// touchendイベント
content.addEventListener("touchend", () => {
text.innerHTML = '指が離れた';
})
指がスマホ画面から離れた時を検知するコード例です。
content要素エリアから指を離した時、txt要素エリアに【指が離れた】とテキスト表示します。
addEventListenerの引数にtouchendを指定する事で指が離れた時を検知してくれます。
指でスマホ画面をタップしたまま移動した時
let content = document.querySelector('.content');
let text = document.querySelector('.txt');
content.addEventListener("touchmove", () => {
event.preventDefault(); // 画面スクロールを防止
text.innerHTML = '指でタップしながら移動';
})
指でスマホ画面をタップしたまま移動した時を検知するコード例です。
content要素エリアを指でタップしたまま移動した時、txt要素エリアに【指でタップしながら移動】とテキスト表示します。
addEventListenerの引数にtouchmoveを指定する事で指のタップ移動を検知してくれます。
タップ動作がキャンセルされた時
let content = document.querySelector('.content');
let text = document.querySelector('.txt');
// touchcancelイベント
content.addEventListener("touchcancel", () => {
text.innerHTML = 'タップがキャンセルされた';
})
タップ動作がキャンセルされた時（電話・着信など）を検知するコード例です。
addEventListenerの引数にtouchcancelを指定する事でタップ動作のキャンセルを検知してくれます。
まとめ
JavaScriptでスマホ画面をタップした時のイベントを検知する方法について一通り紹介しました。
以上で解説を終わります。
目次