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


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

jquery web前端开发 html5 JavaScript 手机端

AC米兰 9 years, 11 months ago

呵呵

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

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

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

jQueryMobile 就是依此判定的。

风BlaZe answered 9 years, 11 months ago

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

sunny57 answered 9 years, 11 months ago

Your Answer