- 工信部備案號 滇ICP備05000110號-1
- 滇公安備案 滇53010302000111
- 增值電信業(yè)務(wù)經(jīng)營許可證 B1.B2-20181647、滇B1.B2-20190004
- 云南互聯(lián)網(wǎng)協(xié)會理事單位
- 安全聯(lián)盟認(rèn)證網(wǎng)站身份V標(biāo)記
- 域名注冊服務(wù)機(jī)構(gòu)許可:滇D3-20230001
- 代理域名注冊服務(wù)機(jī)構(gòu):新網(wǎng)數(shù)碼
(function(){ var extendEventDefaultOpt={ touchdrag:{ preventDefault:true,//阻止觸摸移動的默認(rèn)行為 allowMultiTouch:false//允許在多點觸控時也觸發(fā)這個事件 } } 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;//不屬于這個元素的事件 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 對象的兩個屬性。
然后當(dāng)手指在元素上拖動的時候就會觸發(fā)touchdrag事件。
售前咨詢
售后咨詢
備案咨詢
二維碼
TOP