js移動客戶端--觸控事件 模擬點選、滑屏事件
阿新 • • 發佈:2019-02-02
;(function(doc, win, undefined) { "use strict"; var start = { //記錄開始的觸點 x: 0, y: 0 }, delta = { //記錄滑動距離 x: 0, y: 0 }, startTime = 0, //開始時間 curTime=0, //從開始到現在的事件 longTime = 200,//200ms觸發長按事件 longCurTime=1000, //1000ms 手指不移開即可觸發 通過定時器往上加 target, minDelta = 50,//最小滑動距離 timer=null; //建立事件物件 function createEvent(type) { var event; try { event = new Event(type); } catch (e) { event = doc.createEvent("Events"); event.initEvent(type, true, true); } return event; } //觸發事件 function fireEvent(type, target) { var event = createEvent(type); target.dispatchEvent(event); } //觸控時觸發的函式 function onTouchStart(event) { var touch = event.touches[0]; //判斷預設行為是否可以被禁用 if (event.cancelable) { // 判斷預設行為是否已經被禁用 if (!event.defaultPrevented) { event.preventDefault(); } } target = event.target; //獲取開始的觸點 start.x = touch.pageX; start.y = touch.pageY; delta.x = 0; delta.y = 0; //當前觸控時的時間 startTime =new Date(); //持續觸控不動400ms 則生成longCurTap事件 timer=setInterval(function(){ curTime+=10; if(curTime==longCurTime){ fireEvent("longCurTap", target); } //console.log(curTime); },1); } //滑動時觸發的函式 function onTouchMove(event) { var touch = event.touches[0]; //計算滑動的距離 delta.x = touch.pageX - start.x; delta.y = touch.pageY - start.y; } //移開時觸發的函式 function onTouchEnd(event) { //手指移開後先清除定時器(服務於longCurTap) clearInterval(timer); curTime=0; //獲取自上次觸控以來發生了什麼改變的touch物件的陣列 var touch = event.changedTouches[0], deltaTime =new Date() - startTime, //返回滑動距離的絕對值 deltaX = Math.abs(delta.x), deltaY = Math.abs(delta.y); //console.log(deltaTime); //判斷位置是否發生改變 if (touch.pageX === start.x && touch.pageY === start.y) { //判斷觸控時間是否小於200ms if (deltaTime < longTime) { fireEvent("tap", target);//觸控事件 //console.log(deltaTime); } else if(deltaTime > longTime && deltaTime < longCurTime/2){ fireEvent("longTap", target);//長按事件 } } //判斷滑動距離是否超過30 if (deltaX > minDelta || deltaY > minDelta) { //比較 x,y 滑動邊的長度來判斷方向 if (deltaX > deltaY) { if (delta.x > 0) { fireEvent("swipeRight", target); } else { fireEvent("swipeLeft", target); } } else { if (delta.y > 0) { fireEvent("swipeDown", target); } else { fireEvent("swipeUp", target); } } } } //監聽三個觸控事件 doc.addEventListener("touchstart", onTouchStart); doc.addEventListener("touchmove", onTouchMove); doc.addEventListener("touchend", onTouchEnd); }(document, window));