(function(){
var extendEventDefaultOpt={
    touchdrag:{
        preventDefault:true,//阻止觸摸移動(dòng)的默認(rèn)行為
        allowMultiTouch:false//允許在多點(diǎn)觸控時(shí)也觸發(fā)這個(gè)事件
    }
}
window.extendEvent={//擴(kuò)展事件
    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;//不屬于這個(gè)元素的事件
                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];
            }
        });
    }
}
})();

這是一個(gè)自定事件，在其Event對(duì)象上會(huì)帶有deltaX和deltaY兩個(gè)屬性以表示觸摸拖動(dòng)的偏移量。

用法是

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

選項(xiàng)object的屬性見(jiàn)上面源碼里 extendEventDefaultOpt 對(duì)象的兩個(gè)屬性。

然后當(dāng)手指在元素上拖動(dòng)的時(shí)候就會(huì)觸發(fā)touchdrag事件。