タッチした位置の座標は3種類の起点がある
タッチ操作に対応した端末でタッチがあるとイベント「touchend」を使うことができますが、このイベントを使うと次のようにタッチされた位置の座標を取得することができます。
タッチの位置座標はtouchEventオブジェクトのchangedTouchesプロパティの中に含まれる以下のプロパティを参照することで、それぞれ起点の異なる位置座標を取得することができます。
| 座標の起点 | プロパティ名 |
|---|---|
| 端末のディスプレイ | screenX、screenY |
| ブラウザの表示エリア | clientX、clientY |
| ページ先頭 | pageX、pageY |
位置座標の起点の考え方はマウスカーソルの位置座標と同じです。
それぞれの起点の違いについて詳しくは「マウスカーソルの位置座標を取得する」を参照してください。
以下のコードはそれぞれのプロパティを参照して出力します。
changedTouchesプロパティは配列になっていて、同時にタッチされたポイント（指）の数がそのまま配列になります。
通常のタッチ操作は1本の指で行われることを想定するため、以下のコードでは配列の先頭である「0」を参照しています。
JavaScript コード例
<!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('touchend', logPosition);
});
function logPosition(event) {
if( event.changedTouches[0] ) {
// ディスプレイ
console.log("screenX: " + event.changedTouches[0].screenX);
console.log("screenY: " + event.changedTouches[0].screenY);
// ブラウザ
console.log("clientX: " + event.changedTouches[0].clientX);
console.log("clientY: " + event.changedTouches[0].clientY);
// ページ
console.log("pageX: " + event.changedTouches[0].pageX);
console.log("pageY: " + event.changedTouches[0].pageY);
}
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>コードではまず、以下の箇所でページが読み込まれたタイミングでイベントリスナーにsection要素がタッチされたらlogPositionメソッドを実行するように設定しています。
ここではイベントはtouchendを使用していますが、touchstartでも同じことができます。
イベントリスナーの設定
window.addEventListener('load', function(){
document.getElementById("content1").addEventListener('touchend', logPosition);
});続いてlogPositionメソッドのコードですが、if文の条件式でchangedTouchesプロパティが渡されているかを確認します。
その中ではシンプルにconsole.logメソッドでそれぞれのプロパティを出力して完了です。
changedTouchesプロパティを確認
function logPosition(event) {
if( event.changedTouches[0] ) {
// ディスプレイ
console.log("screenX: " + event.changedTouches[0].screenX);
console.log("screenY: " + event.changedTouches[0].screenY);
// ブラウザ
console.log("clientX: " + event.changedTouches[0].clientX);
console.log("clientY: " + event.changedTouches[0].clientY);
// ページ
console.log("pageX: " + event.changedTouches[0].pageX);
console.log("pageY: " + event.changedTouches[0].pageY);
}
}特定のHTML要素を起点とするケースの対応
changedTouchesプロパティは特定のHTMLを起点とする位置座標を取得することはできません。
しかし、マウスカーソルの位置座標を参照できるMouseEventオブジェクトでは特定のHTML要素を起点とする位置座標offsetXプロパティとoffsetYプロパティを参照することができます。
そこで、もし特定のHTML要素を起点とした位置座標を取得したい場合については、イベントをマウスと同じ「click」に変更します。
これでタッチ操作でも同様の値を取得することができるようになります。
以下のコードではイベントをtouchendからclickに変更して、section要素を起点にした座標を出力します。
JavaScript コード例
<!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('click', logPosition);
});
function logPosition(event) {
console.log("offsetX: " + event.offsetX);
console.log("offsetY: " + event.offsetY);
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>イベントclickはtouchendと同様にscreenXやclientX、pageXも参照できます。