移動端touch事件

2024-04-27 15:19:30

字體：大中小

來源：轉載

供稿：網友

var touchEvent = {}touchEvent =function() { var self=this; /*單次觸摸事件*/ self.tap=function(element, fn) { var startTx, startTy; element.addEventListener('touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; }, false); element.addEventListener('touchend', function(e) { var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY; // 在部分設備上 touch 事件比較靈敏，導致按下和松開手指時的事件坐標會出現一點點變化 if(Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6) { fn(); } }, false); }, /*兩次觸摸事件*/ self.doubleTap=function(element, fn) { var isTouchEnd = false, lastTime = 0, lastTx = null, lastTy = null, firstTouchEnd = true, body = document.body, dTapTimer, startTx, startTy, startTime; element.addEventListener('touchstart', function(e) { if(dTapTimer) { clearTimeout(dTapTimer); dTapTimer = null; } var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; }, false); element.addEventListener('touchend', function(e) { var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, now = Date.now(), duration = now - lastTime; // 首先要確保能觸發單次的 tap 事件 if(Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6) { // 兩次 tap 的間隔確保在 500 毫秒以內 if(duration < 301) { // 本次的 tap 位置和上一次的 tap 的位置允許一定范圍內的誤差 if(lastTx !== null && Math.abs(lastTx - endTx) < 45 && Math.abs(lastTy - endTy) < 45) { firstTouchEnd = true; lastTx = lastTy = null; fn(); } } else { lastTx = endTx; lastTy = endTy; } } else { firstTouchEnd = true; lastTx = lastTy = null; } lastTime = now; }, false); // 在 iOS 的 safari 上手指敲擊屏幕的速度過快， // 有一定的幾率會導致第二次不會響應 touchstart 和 touchend 事件 // 同時手指長時間的touch不會觸發click if(~navigator.userAgent.toLowerCase().indexOf('iphone os')) { body.addEventListener('touchstart', function(e) { startTime = Date.now(); }, true); body.addEventListener('touchend', function(e) { var noLongTap = Date.now() - startTime < 501; if(firstTouchEnd) { firstTouchEnd = false; if(noLongTap && e.target === element) { dTapTimer = setTimeout(function() { firstTouchEnd = true; lastTx = lastTy = null; fn(); }, 400); } } else { firstTouchEnd = true; } }, true); // iOS 上手指多次敲擊屏幕時的速度過快不會觸發 click 事件 element.addEventListener('click', function(e) { if(dTapTimer) { clearTimeout(dTapTimer); dTapTimer = null; firstTouchEnd = true; } }, false); } }, /*長按事件*/ self.longTap=function(element, fn) { var startTx, startTy, lTapTimer; element.addEventListener('touchstart', function(e) { if(lTapTimer) { clearTimeout(lTapTimer); lTapTimer = null; } var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; lTapTimer = setTimeout(function() { fn(); }, 1000); e.PReventDefault(); }, false); element.addEventListener('touchmove', function(e) { var touches = e.touches[0], endTx = touches.clientX, endTy = touches.clientY; if(lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5)) { clearTimeout(lTapTimer); lTapTimer = null; } }, false); element.addEventListener('touchend', function(e) { if(lTapTimer) { clearTimeout(lTapTimer); lTapTimer = null; } }, false); }, /*滑屏事件*/ self.swipe= function(element, fn) { var isTouchMove, startTx, startTy; element.addEventListener('touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false); element.addEventListener('touchmove', function(e) { isTouchMove = true; e.preventDefault(); }, false); element.addEventListener('touchend', function(e) { if(!isTouchMove) { return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if(Math.abs(distanceX) > 20 || Math.abs(distanceY) > 20) { fn(); } }, false); }, /*向上滑動事件*/ self.swipeUp=function(element, fn) { var isTouchMove, startTx, startTy; element.addEventListener('touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false); element.addEventListener('touchmove', function(e) { isTouchMove = true; e.preventDefault(); }, false); element.addEventListener('touchend', function(e) { if(!isTouchMove) { return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if(Math.abs(distanceX) < Math.abs(distanceY)) { if(distanceY > 20) { fn(); isSwipe = true; } } }, false); }, /*向下滑動事件*/ self.swipeDown= function(element, fn) { var isTouchMove, startTx, startTy; element.addEventListener('touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false); element.addEventListener('touchmove', function(e) { isTouchMove = true; e.preventDefault(); }, false); element.addEventListener('touchend', function(e) { if(!isTouchMove) { return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if(Math.abs(distanceX) < Math.abs(distanceY)) { if(distanceY < -20) { fn(); isSwipe = true; } } }, false); }, /*向左滑動事件*/ self.swipeLeft= function(element, fn) { var isTouchMove, startTx, startTy; element.addEventListener('touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false); element.addEventListener('touchmove', function(e) { isTouchMove = true; e.preventDefault(); }, false); element.addEventListener('touchend', function(e) { if(!isTouchMove) { return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if(Math.abs(distanceX) >= Math.abs(distanceY)) { if(distanceX > 20) { fn(); isSwipe = true; } } }, false); }, /*向右滑動事件*/ self.swipeRight= function(element, fn) { var isTouchMove, startTx, startTy; element.addEventListener('touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false); element.addEventListener('touchmove', function(e) { isTouchMove = true; e.preventDefault(); }, false); element.addEventListener('touchend', function(e) { if(!isTouchMove) { return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if(Math.abs(distanceX) >= Math.abs(distanceY)) { if(distanceX < -20) { fn(); isSwipe = true; } } }, false); }}

上一篇：post跨域請求問題

下一篇：深入理解javascript原型和閉包（16）——補充：上下文環境和作用域的關系