タッチした位置を取得する方法
タッチした位置を取得するには、eventオブジェクトのchangedTouches[0].pageX
、changedTouches[0].pageY
を参照します。
サンプルコード
タッチ関連のイベントの、イベントオブジェクトを参照しましょう。
<div id="target"></div>
document.getElementById( "target" ).ontouchstart = function( event ) {
// タッチの情報を含むオブジェクト
var touchObject = event.changedTouches[0] ;
// 位置座標を取得する
var x = touchObject.pageX ; // 水平方向の位置座標
var y = touchObject.pageY ; // 垂直方向の位置座標
}
デモ
絶対位置
タッチ位置の情報はeventオブジェクトに含まれます。タッチイベントを設定して、その中で取得しましょう。取得できるのは、ページ全体の左上からの位置座標です。タッチデバイスでこのページ上をタップしてみて下さい。
document.body.addEventListener( "touchstart", function( event ) {
var touchObject = event.changedTouches[0] ;
var x = touchObject.pageX ;
var y = touchObject.pageY ;
} ) ;
x = 0
y = 0
y = 0
相対位置
要素内におけるタッチ位置を知るには、前項の値から要素の位置を引きましょう。タッチデバイスで枠線内をタップしてみて下さい。
// <div id="target">...</div>などの要素にタッチイベントを設定
document.getElementById( "target" ).addEventListener( "touchstart", function( event ) {
var touchObject = event.changedTouches[0] ;
var touchX = touchObject.pageX ;
var touchY = touchObject.pageY ;
// 要素の位置を取得
var clientRect = this.getBoundingClientRect() ;
var positionX = clientRect.left + window.pageXOffset ;
var positionY = clientRect.top + window.pageYOffset ;
// 要素内におけるタッチ位置を計算
var x = touchX - positionX ;
var y = touchY - positionY ;
} ) ;
x = 0
y = 0
関連記事
- マウスデバイスとタッチデバイスを判別する方法
- ユーザーがマウスデバイスなのか、タッチデバイスなのかを判定します。
- 2点の座標の角度を求める方法
- 2点の座標の角度を求める公式を、JavaScriptで表現します。
- ページのURLを取得する方法
- ページのURLを取得するには、locationオブジェクトの各プロパティを参照します。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。