タッチ中の座標を取得

タッチ中の座標を取得するには、イベントオブジェクトのevent.clientXプロパティまたはevent.clientYプロパティを使用します。

構文

X軸

var x = event.clientX;

Y軸

var y = event.clientY;

戻り値:event.clientX

X軸の位置(座標)の値を返します。

戻り値:event.clientY

Y軸の位置(座標)の値を返します。

デモ

-

サンプルコード

JavaScript

var sampleElem = document.getElementById('sample');

var touchHandler = function(event) {
	var x = 0, y = 0;

	if (event.touches && event.touches[0]) {
		x = event.touches[0].clientX;
		y = event.touches[0].clientY;
	} else if (event.originalEvent && event.originalEvent.changedTouches[0]) {
		x = event.originalEvent.changedTouches[0].clientX;
		y = event.originalEvent.changedTouches[0].clientY;
	} else if (event.clientX && event.clientY) {
		x = event.clientX;
		y = event.clientY;
	}

	console.log('x : ' + x + ', y : ' + y);
};

sampleElem.addEventListener('touchstart', touchHandler, false);
sampleElem.addEventListener('touchmove', touchHandler, false);
sampleElem.addEventListener('touchend', touchHandler, false);

JavaScript逆引きリファレンス一覧へ戻る