touchEvent
基于Jquery扩展在移动端产生的事件，包含，单次触摸事件，两次触摸事件，长按事件，滑屏事件，向上滑动事件，向下滑动事件，向左滑动事件，向右滑动事件
预览
地址预览
https://hangjob.github.io/touchEvent/index.html
事件类型
单次触摸事件
$(el).tap tap: function(element, fn) { var startTx, startTy; v_on(element, 'touchstart', function(e) { var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; }, false); v_on(element, '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); }
两次触摸事件
$(el).doubleTap doubleTap: function(element, fn) { var isTouchEnd = false, lastTime = 0, lastTx = null, lastTy = null, firstTouchEnd = true, body = document.body, dTapTimer, startTx, startTy, startTime; v_on(element, 'touchstart', function(e) { if (dTapTimer) { clearTimeout(dTapTimer); dTapTimer = null; } var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; }, false); v_on(element, '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')) { v_on(body, 'touchstart', function(e) { startTime = Date.now(); }, true); v_on(body, '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 事件 v_on(element, 'click', function(e) { if (dTapTimer) { clearTimeout(dTapTimer); dTapTimer = null; firstTouchEnd = true; } }, false); } }
长按事件
$(el).longTap longTap: function(element, fn) { var startTx, startTy, lTapTimer; v_on(element, 'touchstart', function(e) { if (lTapTimer) { clearTimeout(lTapTimer); lTapTimer = null; } var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; lTapTimer = setTimeout(function() { fn(startTx, startTy); }, 1000); }, false); v_on(element, '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); v_on(element, 'touchend', function(e) { if (lTapTimer) { clearTimeout(lTapTimer); lTapTimer = null; } }, false); }
滑屏事件
$(el).swipe
向上滑动事件
$(el).swipeUp 向下滑动事件 $(el).swipeDown
向左滑动事件
$(el).swipeLeft
向右滑动事件
$(el).swipeRight
$.fn.extend()扩展
jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用
jQuery.fn.extend({ tap: function(fn) { return touchEvent.tap(jQuery(this)[0], fn); }, doubleTap: function(fn) { return touchEvent.doubleTap(jQuery(this)[0], fn); }, longTap: function(fn) { return touchEvent.longTap(jQuery(this)[0], fn); }, swipe: function(fn) { return touchEvent.swipe(jQuery(this)[0], fn); }, swipeLeft: function(fn) { return touchEvent.swipeLeft(jQuery(this)[0], fn); }, swipeRight: function(fn) { return touchEvent.swipeRight(jQuery(this)[0], fn); }, swipeUp: function(fn) { return touchEvent.swipeUp(jQuery(this)[0], fn); }, swipeDown: function(fn) { return touchEvent.swipeDown(jQuery(this)[0], fn); } });
如何使用
$('.container').swipeRight((res) => { ulDom.append(createLi(`向右滑动了${res}px`)); }) $('.container').swipe((x, y) => { ulDom.append(createLi(`滑屏事件,X轴滑动了${x}px,Y轴滑动了${y}px`)); }) ...
