通过html5 touch事件封装手势识别组件

html5移动端新增了touchstart,touchmove,touchend事件，利用这3个事件，判断手指的点击和划动轨迹，我们可以封装各种手势的识别功能，

这3个事件和pc端的mousedown,mousemove,mouveup非常类似，不同的是touch事件可以有多个点击的点，而鼠标每次只有一个点，我们即然是做组件封装，就要考虑在pc上调试的情况，否则用手机调试非常不方便，通过对mouse事件的处理，可以一套代码同时兼容pc端和移动端。

下面来逐步封装一个滑动手势（swipe）的组件

1.判断是否触摸屏

我们使用能力检测，检测是否支持touchstart事件，就可以知道是否是触摸屏，因为触摸事件可以通过document.ontouchstart=function(){} 这样的方式定义，用in操作符判断即可，对于win8，触屏能力会在navigator对象中生成一个msPointerEnabled属性。

 if ('ontouchstart' in window || 'ontouchstart' in document) {
            //iOS & android
            supportsTouch = true;
 } else if(window.navigator.msPointerEnabled) {
            //Win8
            supportsTouch = true;
 }

更多相关文章

随机推荐