SYNCERのロゴ
アイキャッチ画像

タッチした位置を取得する方法

タッチした位置を取得するには、eventオブジェクトのchangedTouches[0].pageXchangedTouches[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

相対位置

要素内におけるタッチ位置を知るには、前項の値から要素の位置を引きましょう。タッチデバイスで枠線内をタップしてみて下さい。

// <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

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。