博客

转载自：https://segmentfault.com/q/1010000002930007

js的touch事件与浏览器的滑动冲突怎么办

zepto提供了一个tap事件，具体原理大概是

 元素touchend的时候，判断是否触发了touchmove事件

下面代码只是我自己想着写的，并非zepto源码

$.fn.tap = function(fun){
    var x,y,X,Y,moved ;

        element.addEventListener('touchstart',function(event){
            moved = false ; // moved用于判断是否滑动
            x = event.targetTouches[0].screenX ;
            y = event.targetTouches[0].screenY ;
        });
        element.addEventListener('touchmove',function(event){
            if(moved) return
            X = event.targetTouches[0].screenX ;
            Y = event.targetTouches[0].screenY ;
            if(X-x != 0 || Y-y !=0) moved = true
        });
        element.addEventListener('touchend',function(event){
            if(!moved) // 如果没有滑动就执行
            {
                fun();
            }
        })
    }

難道你把 touch 系列事件統統當作 click 事件了。。。

好吧當初我也是這樣的。。。

所以你要知道 tap 和 scroll 的區別在於 是否有某方向位移大於 10px。

jQueryMobile 就是依此判定的。