JS、JQueryはtouchstart、touchmove、touchend座標を取得します



Js Jquery Get Touchstart



Jqueryの書き方:

$('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0] var _x= _touch.pageX }) $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.targetTouches[0] var _x= _touch.pageX }) $('#id').on('touchend',function(e) { var _touch = e.originalEvent.changedTouches[0] var _x= _touch.pageX }

ネイティブライティング:



document.getElementById('id').addEventListener('touchstart',function(e) { var _x=e.touches[0].pageX var _y=e.touches[0].pageY console.log('start',_x) }) document.getElementById('id').addEventListener('touchmove',function(e) { var _x=e.touches[0].pageX var _y=e.touches[0].pageY console.log('move',_x) }) document.getElementById('id').addEventListener('touchend',function(e) { var _x=e.changedTouches[0].pageX var _y=e.changedTouches[0].pageY console.log('end',_x) })

上記の2つの方法では、touchendはchangedTouches [0]を使用する必要があり、console.log(e)にアクセスでき、さまざまな方法があります。

一般的に、人差し指の座標を取ります。他の要件がある場合は、指の数を判断する必要があるかもしれません。



if (e.targetTouches.length == 1) { //... }

ちなみに、ブラウザのデフォルトイベントを無効にする必要がある場合があります。

e.preventDefault()