web関連
【jquery,javascript】”mousemove”と”touchmove”イベントで座標を取得する方法が違う件
PCのマウス座標とスマホのタップをしている位置の座標を取得する時に方法が違くて困惑したので備忘録
“mousemove”と”touchmove”の座標取得方法の違い
jQueryとjavascriptで座標の取得方法と
jQuery
// PCのマウスポインターの座標を取得
$(document).on("mousemove",function(e){
console.log(e);// n.Event {originalEvent: MouseEvent, type: "mousemove", timeStamp: 2675.329999998212, jQuery214013954162086980282: true, isDefaultPrevented: ƒ, …}
console.log(e.clientX);// 79
console.log(e.clientY);// 441
console.log(event.clientX);// 79
console.log(event.clientY);// 441
console.log(event);// MouseEvent {isTrusted: true, screenX: 483, screenY: 543, clientX: 79, clientY: 441, …}
});
// スマホのタップしている時の座標を取得
$(document).on('touchmove', function(e){
console.log(e);// n.Event {originalEvent: TouchEvent, type: "touchmove", timeStamp: 1108.5600000806153, jQuery214001637072764189562: true, isDefaultPrevented: ƒ, …}
// console.log(e.changedTouches[0].clientX);// error
// console.log(e.changedTouches[0].clientY);// error
console.log(event.changedTouches[0].clientX);// 79
console.log(event.changedTouches[0].clientY);// 441
console.log(event);// TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
});mousemoveの時は引数にeを指定してもeventで座標取得できるけど、touchmoveだとだめだね
Memo：「eは、イベントハンドラーに渡されるeventオブジェクトの短いvar参照です。」って書かれているけどよくわからん
引数に設定するとイベントオブジェクトを取得できるし、「e」でも「ev」でもいいって書いてあったりするんだけど「event」でイベント取得できるんだけど、「引数のe=イベントの種類を取得」「event=イベントの種類の中のイベントの詳細を取得」で「event」を使わないで「e」を使うのはそっちのほうが短く書けるから的な意味？
javascript
// PCのマウスポインターの座標を取得
window.addEventListener("mousemove", function(e){
console.log(e);// MouseEvent {isTrusted: true, screenX: 408, screenY: 175, clientX: 4, clientY: 72, …}
console.log(e.clientX);// 4
console.log(e.clientY);// 72
console.log(event);// MouseEvent {isTrusted: true, screenX: 408, screenY: 175, clientX: 4, clientY: 72, …}
});
// スマホのタップしている時の座標を取得
window.addEventListener("touchmove", function(e){
console.log(e);// TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
console.log(e.changedTouches[0].clientX);// 79
console.log(e.changedTouches[0].clientY);// 441
console.log(event.changedTouches[0].clientX);// 79
console.log(event.changedTouches[0].clientY);// 441
console.log(event);// TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
});javascriptの時は「e」も「event」も取得できるものは一緒だね
結論
eventという変数？は”mousemove”と”touchmove”どちらも存在しており、jQueryを使った時のみ
引数eとeventの値が変わる
参考(読んでおきたい記事)
function(e){…}って書いておいて引数の「e」使わないこともあるみたい
まじでわかんねー