touchend

タッチエンド（イベント）

意味画面から指が離れたときに起こるイベント。

touchendとは？

ユーザーがタッチスクリーン上から指やスタイラスペンを離すときに発火するイベント。

touchendの具体的な使い方

タッチ終了位置を検出する例

<div id='touchArea' style='width: 300px; height: 50px; background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px;'>ここをタッチして離してください</div>
<p id='output'></p>

<script>
const touchArea = document.getElementById('touchArea');
const output = document.getElementById('output');

touchArea.addEventListener('touchend', function(event) {
  const touch = event.changedTouches[0];
  const x = Math.round(touch.clientX);
  const y = Math.round(touch.clientY);
  output.textContent = `タッチ終了位置 - X: ${x}, Y: ${y}`;
});
</script>

指定された要素内でタッチ操作を行い、指を離した時の座標を表示します。event.changedTouches[0]を使用して、最後に変更されたタッチポイントの情報を取得しています。

touchendに関するよくある質問

Q. touchendとclickの違いは？

A. touchendはタッチ操作の終了時に発火しますが、clickはタップ操作の完了時（touchstartとtouchendの両方が同じ要素で発生した後）に発火します。モバイルデバイスでは、touchendを使用する方が反応が速くなります。

Q. touchendで位置情報を取得できる？

A. はい、touchendイベントのchangedTouches配列を使用して、指が離れた位置の情報を取得できます。ただし、この位置は必ずしもtouchstartイベントの位置と同じではありません。

Q. touchendイベントの注意点は？

A. touchendイベントは、指が要素の外で離れた場合でも発火します。そのため、必要に応じてtouchstartイベントと組み合わせて使用し、タッチ操作が同じ要素内で開始され終了したことを確認することが重要です。

touchendが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのtouchendやevent.stopPropagation()、animationstart、mouseleave、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。