1. 程式人生 > >js獲取移動端觸控座標

js獲取移動端觸控座標

想在touchmove事件裡監聽手指按下的座標,event.pageX獲取的是undefined,changedTouches,targetTouches,touches也只獲得到了滑鼠按下時的座標,沒法持續監聽,求幫助!或者其他辦法也行,效果大概是一個元素,手指在上面滑動,然後改變這個元素的top之類的...//禁用手機預設的觸屏滾動行為


document.addEventListener('touchmove', function(event) { event.preventDefault(); }, false); //touchstart事件 function touchSatrtFunc(evt) {
try { //evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //記錄觸點初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc:'
+ e.message); } } //touchmove事件,這個事件無法獲取座標 function touchMoveFunc(evt) { try { //evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //document.getElementById("version").innerHTML = "原:"+startY+" "+"現:"+y;
//判斷滑動方向 上下 if (y - startY > 100) { swipeDown();//你自己的方法 我是用來翻頁的一樣的 } else if(y - startY < -100){ swipeUp();//你自己的方法 } } catch (e) { alert('touchMoveFunc:' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { //evt.preventDefault(); //阻止觸控時瀏覽器的縮放、滾動條滾動等 } catch (e) { alert('touchEndFunc:' + e.message); } } //繫結事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判斷是否支援觸控事件 function isTouchDevice() { //document.getElementById("version").innerHTML = navigator.appVersion; try { document.createEvent("TouchEvent"); //alert("支援TouchEvent事件!"); bindEvent(); //繫結事件 } catch (e) { alert("不支援TouchEvent事件!" + e.message); } }