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

Question

做手机端用touch事件会比鼠标事件要快，但是当手机端滑动页面时会触发某些元素的touch事件，但也许用户并不想点击，应该怎么解决

Answer 1

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();
            }
        })
    }

Answer 2

呵呵

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

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

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

jQueryMobile 就是依此判定的。