基于 zepto 的触摸函数封装

移动端使用 zepto 做一些基于触摸的动画的时候。须要开发一个函数库。

功能：实例化对象以后可以，触发对应的事件，可以返回给我，当前的移动方向和 X 轴 或者 Y 轴 的移动位移。

var TouchDirection = function(e) {
    var startThat = {},
        moveThat = {};

    this.touchStartEven = function(e) {

        startThat.startX = e.touches[0].pageX;
        startThat.startY = e.touches[0].pageY;
        this.startThat = startThat;

        return this;
    };

    this.touchMoveEven = function(e) {
        moveX = e.touches[0].pageX;
        moveY = e.touches[0].pageY;

        tempX = this.startThat.startX - moveX;
        tempY = this.startThat.startY - moveY;
        absTempX = Math.abs(tempX);
        absTempY = Math.abs(tempY);
        angleTouch = absTempX / absTempY;

        if (tempX < 0 && angleTouch >= 1) {
            //鼠标右滑动
            moveThat.direction = 'right';
            moveThat.moveX = absTempX;
            this.moveThat = moveThat;

            return this;
        }
        if (tempX > 0 && angleTouch >= 1) {
            //鼠标左滑动
            moveThat.direction = 'left';
            moveThat.moveX = absTempX;
            this.moveThat = moveThat;

            return this;

        }
        if (tempY > 0 && angleTouch < 1) {
            //上滑
            moveThat.direction = 'up';
            moveThat.moveY = absTempY;
            this.moveThat = moveThat;

            return this;
        }

        if (tempY < 0 && angleTouch < 1) {
            //下滑
            moveThat.direction = 'down';
            moveThat.moveY = absTempY;
            this.moveThat = moveThat;

            return this;
        }
    };

    this.touchEndEven = function(){
        this.startThat = null;
        this.moveThat = null;
    };
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65

用法：

var touchResult = new TouchDirection();

var touchStartEv = function(e){
    var that = touchResult.touchStartEven(e);
    console.log(that.startThat);
};

var touchMoveEv = function(e) {
    var that = touchResult.touchMoveEven(e);
    console.log(that.moveThat);
};

var touchEndEv = function(e) {
    var that = touchResult.touchEndEven(e);
};

$('.test').on('touchstart', touchStartEv);
$('.test').on('touchmove', touchMoveEv);
$('.test').on('touchend', touchEndEv);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

測试的执行结果：

实例 demo 地址：点我

---

假设您认为对您有帮助。请点击以下的 star 给我一颗星。谢谢啦！