(function(){
var extendEventDefaultOpt={
    touchdrag:{
        preventDefault:true,//阻止觸摸移動的默認行為
        allowMultiTouch:false//允許在多點觸控時也觸發(fā)這個事件
    }
}
window.extendEvent={//擴展事件
    touchdrag:function(element,opt){
        var stats={},opt=Object.assign({},extendEventDefaultOpt.touchdrag,opt);
        element.addEventListener('touchstart',function(e){
            if(!opt.allowMultiTouch && e.changedTouches.length>1){stats={};return;}
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                stats[ct[t].identifier]={x:ct[t].clientX,y:ct[t].clientY};
            }
        });
        element.addEventListener('touchmove',function(e){
            if(!opt.allowMultiTouch && e.touches.length>1){stats={};return;}
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                var id=ct[t].identifier;
                if(!id in stats)continue;//不屬于這個元素的事件
                var event=new TouchEvent('touchdrag',e);
                event.deltaX=ct[t].clientX-stats[id].x;
                event.deltaY=ct[t].clientY-stats[id].y;
                stats[id].x=ct[t].clientX;
                stats[id].y=ct[t].clientY;
                element.dispatchEvent(event);
            }
            if(opt.preventDefault)e.preventDefault();
        });
        element.addEventListener('touchend',function(e){
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                var id=ct[t].identifier;
                if(id in stats)delete stats[id];
            }
        });
    }
}
})();

這是一個自定事件，在其Event對象上會帶有deltaX和deltaY兩個屬性以表示觸摸拖動的偏移量。

用法是

extendEvent.touchdrag(元素,選項Object) //在元素上啟用這個自定義事件

選項object的屬性見上面源碼里 extendEventDefaultOpt 對象的兩個屬性。

然后當手指在元素上拖動的時候就會觸發(fā)touchdrag事件。