javascript - js的touch事件与浏览器的滑动冲突怎么办-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

天蓬老师 2017-04-10 15:26:33

[JavaScript讨论组]

583

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

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(2)

大家讲道理2017-04-10 15:28:33 2楼

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