JavaScriptのタッチイベントとは？基本の4種類と実装例をわかりやすく解説
JavaScriptのタッチイベントとは
タッチイベントは、ユーザーがタッチスクリーン対応デバイス（スマートフォンやタブレットなど）を操作した際に発生するイベントです。指で画面に触れる動作を検知できるため、モバイル向けWebアプリやインタラクティブなUIを実装するうえで非常に重要な仕組みとなっています。
代表的なタッチイベントには以下の4種類があります。
| イベント | 説明 |
|---|---|
| touchstart | タッチポイントが画面（タッチ面）に接触したときに発生します。 |
| touchmove | タッチポイントが画面上で移動したときに発生します。 |
| touchend | タッチポイントが画面から離れたときに発生します。 |
| touchcancel | 電話の着信など何らかの理由でタッチが中断されたときに発生します。 |
これらのイベントは addEventListener() を使って要素に登録することで利用できます。
タッチイベントの実装例
ここでは、「touchstart」イベントを検知してテキストを表示する簡単なサンプルを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>JavaScriptのタッチイベント</h1>
<div class="sample">ここはタッチ操作を試すサンプルテキストです</div>
<div class="result"></div>
<h3>上のテキストをタッチすると、下に結果が表示されます</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
sampleEle.addEventListener("touchstart", () => {
resEle.innerHTML = "touchstartイベントが発火しました";
});
</script>
</body>
</html>このコードを実行すると、次のような出力が得られます。
出力結果
テキスト部分をタッチすると、touchstart イベントが発火し、結果表示エリアにメッセージが出力されます。
まとめ
タッチイベントを使いこなすことで、スワイプやピンチ操作など、モバイルデバイスならではの直感的な操作性を実現できます。まずは「touchstart」などの基本的なイベントから試して、実際に挙動を確認してみると理解が深まるでしょう。
-
JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説
JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for
-
【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説
JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照