【事件】封装touch触摸事件 --- DOM2级、单点触控

//封装touch触摸事件 --- DOM2级、单点触控
if (!Object.prototype.addTouchEvents) {
    Object.defineProperty(Object.prototype, ‘addTouchEvents‘, {
        value: function(Obj) {
            var noop = function() {};
            var defaults = {
                start: noop, //开始
                move: noop, //移动
                end: noop, //结束
                left: noop, //结束（向左）
                right: noop, //结束（向右）
                top: noop, //结束（向上）
                down: noop, //结束（向下）
                long: noop, //结束（长按）
                click: noop, //结束（点击）
                x: 380, //触发 left || right 的界值 （px）
                y: 380, //触发 top || down 的界值 （px）
                speed: 180, //触发 left || right || top || down 的界值 （px/0.3s）
                isPropagate: true //是否传播
            };
            var Params = {};
            for (var p in defaults) {
                if (defaults.hasOwnProperty(p)) {
                    if (Obj[p] === false || Obj[p] === 0) {
                        Params[p] = Obj[p];
                    } else {
                        Params[p] = Obj[p] || defaults[p];
                    }
                }
            }
            var StartX, StartY, StartTime;
            var Change = {};

            this.addEventListener(‘touchstart‘, function(e) {
                if (!Params.isPropagate) e.stopPropagation();
                if (e.targetTouches.length === 1) {
                    StartX = e.targetTouches[0].pageX;
                    StartY = e.targetTouches[0].pageY;
                    StartTime = new Date().getTime();
                    Change.x = 0;
                    Change.y = 0;
                    Params.start(e, Change);
                }
            }, false);
            this.addEventListener(‘touchmove‘, function(e) {
                e.preventDefault();
                if (!Params.isPropagate) e.stopPropagation();
                if (e.targetTouches.length === 1) {
                    Change.x = e.targetTouches[0].pageX - StartX;
                    Change.y = e.targetTouches[0].pageY - StartY;
                    Params.move(e, Change);
                }
            }, false);
            this.addEventListener(‘touchend‘, function(e) {
                if (!Params.isPropagate) e.stopPropagation();
                if (e.targetTouches.length === 0) {
                    Params.end(e, Change);
                    var changeTime = new Date().getTime() - StartTime,
                        abcChangeX = Math.abs(Change.x),
                        abcChangeY = Math.abs(Change.y),
                        speedX = abcChangeX / (changeTime / 300),
                        speedY = abcChangeY / (changeTime / 300);
                    if (abcChangeX > abcChangeY && (abcChangeX > Params.x || speedX > Params.speed)) {
                        if (Change.x < 0) {
                            Params.left(e, Change);
                        } else {
                            Params.right(e, Change);
                        }
                    } else if (abcChangeY > abcChangeX && (abcChangeY > Params.y || speedY > Params.speed)) {
                        if (Change.y < 0) {
                            Params.top(e, Change);
                        } else {
                            Params.down(e, Change);
                        }
                    } else if (abcChangeX < 5 && abcChangeY < 5) {
                        if (changeTime > 300) {
                            Params.long(e, Change);
                        } else {
                            Params.click(e, Change);
                        }
                    }
                }
            }, false);
        }
    });
}



//使用情况
div.addTouchEvents({
    start: function(e, change) {
        console.log(‘‘);
        console.log(‘开始‘);
    },
    move: function(e, change) {
        console.log(‘移动‘);
    },
    end: function(e, change) {
        console.log(‘结束  ‘ + JSON.stringify(change));
    },
    left: function(e, change) {
        console.log(‘向左‘);
    },
    right: function(e, change) {
        console.log(‘向右‘);
    },
    top: function(e, change) {
        console.log(‘向上‘);
    },
    down: function(e, change) {
        console.log(‘向下‘);
    },
    long: function(e, change) {
        console.log(‘长按‘);
    },
    click: function(e, change) {
        console.log(‘点击‘);
    },
    x: 380, //触发 left || right 的界值 （px）
    y: 380, //触发 top || down 的界值 （px）
    speed: 180, //触发 left || right || top || down 的界值 （px/0.3s）
    isPropagate: true //是否传播
});