(function(){ var extendEventDefaultOpt={ touchdrag:{ preventDefault:true,//阻止触摸移动的默认行为 allowMultiTouch:false//允许在多点触控时也触发这个事件 } } 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` 对象的两个属性。
然后当手指在元素上拖动的时候就会触发touchdrag事件。
DEMO (在触摸设备上拖动下面的方块)
以上DEMO源码
<div style="position: relative;"><div class="poipoi" style="background-color: #000;"></div><div class="poipoi" style="background-color: #ccc;"></div></div> <style>.poipoi{position:absolute;width: 100px;height: 100px;}</style> <script> (function(){ var extendEventDefaultOpt={ touchdrag:{ preventDefault:true,//阻止触摸移动的默认行为 allowMultiTouch:false//允许在多点触控时也触发这个事件 } } 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]; } }); } } var pois=[].slice.call(document.querySelectorAll('.poipoi')); pois.forEach(function(e){ extendEvent.touchdrag(e,{allowMultiTouch:true}); e.x=0;e.y=0; e.addEventListener('touchdrag',function(ev){ e.x+=ev.deltaX; e.y+=ev.deltaY;console.log(e.x,e.y) e.style.top=(e.y|0)+'px'; e.style.left=(e.x|0)+'px'; }); }); })();</script>
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。