html 手机滑动事件,完整版移动端滑动事件封装

touchEvent

基于Jquery扩展在移动端产生的事件，包含，单次触摸事件，两次触摸事件，长按事件，滑屏事件，向上滑动事件，向下滑动事件，向左滑动事件，向右滑动事件

预览

事件类型

单次触摸事件$(el).taptap: 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).doubleTapdoubleTap: 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).longTaplongTap: 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`));

})

...

Github

如有疑问