javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对touch事件进行二次封装才能实现。
zepto是移动端上使用率比较高的一个类库,但是其touch模块模拟出来的一些事件存在一些兼容性问题,如tap事件在某些安卓设备上存在事件穿透的bug,其他类型的事件也或多或少的存在一些兼容性问题。
于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在iOS7、Andorid4上的一些比较常见的浏览器中测试通过。
tap事件
tap事件相当于pc浏览器中的click效果,虽然在触屏设备上click事件仍然可用,但是在很多设备上,click会存在一些延迟,如果想要快速响应的“click”事件,需要借助touch事件来实现。
varstartTx,startTy;
element.addEventListener('touchstart',function(e){ vartouches=e.touches[0];
startTx=touches.clientX; startTy=touches.clientY; },false);
element.addEventListener('touchend',function(e){ vartouches=e.changedTouches[0], endTx=touches.clientX, endTy=touches.clientY;
//在部分设备上touch事件比较灵敏,导致按下和松开手指时的事件坐标会出现一点点变化 if(Math.abs(startTx-endTx)<6&&Math.abs(startTy-endTy)<6){ console.log('firetapevent'); } },false);