JS - 手機裝置偵測位移 2017-01-10
對於行動裝置而言
傳統的$(document).mousemove(function(e){ ... e.pageX .... e.pageY });
是完全無法使用的.
有四個屬於行動裝置專用的觸控語法
touchstart:點下去觸發的事件
touchmove:點下去後不放在螢幕上移動觸發的事件
touchend:從螢幕上放開觸發的事件
touchcancel:當觸控點超過螢幕可支援的數量時觸發的事件
這些事件支援一個以上的觸控點(視裝置支援最大觸控點而定)
假設我想要偵測我的第一個觸控點的X,Y位移量 var touch_track = document.getElementById("元素");var touchesX = [ ], touchY = [ ];
var posXstart, posXrange, posXnow = 0; // X軸的起始位置,X軸的滑動範圍,X軸的現在位置
var posYstart, posYrange, posYnow = 0; // X軸的起始位置,X軸的滑動範圍,X軸的現在位置
touch_track.addEventListener("touchstart", function (e) { //紀錄下觸控的事件
event.preventDefault(); //預防原先的事件觸發
touchesX = e.touches;
touchesY = e.touches;
posXstart = touchesX[0].pageX; //touches[0]為第一個所下的觸控點
posYstart = touchesY[0].pageY; //touches[0]為第一個所下的觸控點
},false);
touch_track.addEventListener("touchmove", function (e) { //紀錄移動的事件
event.preventDefault();
touchesX = e.touches;
touchesY = e.touches;
posXrange = -(parseInt(touchesX[0].pageX - posXstart)); //touches[0]X軸移動的距離
posXnow = posXnow + posXrange; //上一個位置與移動距離為新的X座標位置
posYrange = -(parseInt(touchesY[0].pageY - posYstart)); //touches[0]Y軸移動的距離
posYnow = posYnow + posYrange; //上一個位置與移動距離為新的Y座標位置
},false);
觸控點為
touchesX[0] -touchesX[n],
這也是最初宣告touches 為陣列的原因.
另外有部分瀏覽器會有觸控滑動與Scroll的事件衝突,
因此建議用event.preventDefault();取消掉原始事件.
要偵測多個點之間的距離:var 變數 = touch.length;