关于javascript:完整版移动端滑动事件封装

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`));})...

Github

https://github.com/hangjob/touchEvent

如有疑难

扫描公众号，回复：加群
https://www.vipbic.com/weixin.html