タッチ中の座標を取得
タッチ中の座標を取得するには、イベントオブジェクトの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);