最終更新日：
公開日：
レシピ
イベント
タッチ（タップ）したときに処理を実行する
スマホやタブレットなどの端末でタッチ操作があった場合に指定した処理を実行する方法について解説します。
この記事のポイント
- タッチ操作を開始するときにtouchstart、タッチ終了するときにはtouchendのイベントが発生する
- タッチがキャンセルされたときもイベントが発生する
- マウスイベントのclickで代用できることもある
目次
タッチ操作を検出する
タッチ操作に対応したスマホやタブレットでタッチ操作があると、関連する次の4種類のイベントが発生します。
| イベント名 | 発生するタイミング |
|---|---|
| touchstart | タッチ操作を開始したとき |
| touchend | 指が離れてタッチ操作を終了したとき |
| touchmove | スワイプ／フリックしているとき |
| touchcancel | タッチ操作をキャンセルしたとき |
以下の例ではtouchstartとtouchendを使って、section要素をタッチしたときと、指を話したとき（タッチ終了したとき）にそれぞれメッセージを出力しています。
コードは次のようになります。
ページの読み込みが完了したら発生するイベントloadの中で、タッチ開始と終了の2種類のイベントリスナーを登録しているところに注目してください。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// タッチ開始
document.getElementById("content1").addEventListener('touchstart', logTouchStart);
// タッチ終了
document.getElementById("content1").addEventListener('touchend', logTouchEnd);
});
function logTouchStart() {
console.log("タッチ開始");
}
function logTouchEnd() {
console.log("タッチ終了");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>id属性「content1」を持つsection要素をタッチすると、開始したときにtouchstartが発生してlogTouchStartメソッドを実行し、指を離したときにはtouchendが発生してlogTouchEndメソッドを実行します。
2つのメソッドはいずれもconsole.logメソッドでメッセージを出力するシンプルなものになっています。
タッチ操作を検出する
タッチ操作のキャンセルがあった場合はイベントtouchcancelが発生します。
次の例はタッチ操作のキャンセルがあったときにメッセージを表示します。
なお、touchcancelは操作中に電話着信などが起こって中断が起こったときに発生しますが、ホームボタンのあるiPhoneではタッチ中にホームボタンを押すことで意図的に中断することができます。
コードは次のようになります。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// タッチキャンセル
document.getElementById("content1").addEventListener('touchcancel', logTouchCancel);
});
function logTouchCancel(event) {
alert("タッチイベントをキャンセルしました");
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>ページが読み込まれたタイミングで、section要素にイベントリスナーでイベントキャンセルのtouchcancelが発生したとき、logTouchCancelメソッドを実行するよう設定しています。
マウスのイベントとの違い
タッチ操作はマウスのイベントであるclickでも検出できるため、こちらで対応することもあります。
これで十分なこともありますが、マウスのイベントはMouseEventオブジェクト、タッチ系操作はTouchEventオブジェクトと受け取るオブジェクトに違いがあるため、以下のような場合には注意が必要です。
- タッチした位置の座標を使うとき
- 複数のタッチポイントを取得したいとき（2本以上の指で同時にタッチ操作したとき）
タッチした位置の座標を使うとき
シンプルに瞬間的なタッチされた座標を取得したい場合ではclickと違いはありません。
大きな違いが出るのはスワイプ／フリック操作を検出するときです。
例えば、タッチ開始した位置から終了した位置の座標を取得して移動距離を取得したいときは、イベントtouchmoveを使用すると正確に座標を取得することができます。
より詳しくは「スワイプ／フリックしたときに処理を実行する」を参照ください。
複数のタッチポイントを取得したいとき
MouseEventオブジェクトは常に単数ですが、TouchEventオブジェクトのtouchesプロパティは配列になっていてタッチポイントの数だけプロパティを参照することができます。（ただし、同時タッチは本当に同時にスクリーンに触れる必要があるため結構難しいです…）
以下のコード例はタッチポイントの数だけタッチされた位置の座標を出力します。
pageXはページの左端を起点としたX軸のピクセル数、pageYは上部を起点としたY軸のピクセル数を参照することができます。
コード例
function logPosition(event) {
for(var i=0; event.changedTouches[i]; i++) {
console.log("pageX: " + event.changedTouches[i].pageX);
console.log("pageY: " + event.changedTouches[i].pageY);
}
}