一段封装好的移动端点击事件的代码

最新推荐文章于 2023-02-13 16:49:46 发布

原创最新推荐文章于 2023-02-13 16:49:46 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种用于封装移动端tap点击事件的方法，详细解释了如何通过监听touchstart和touchend事件来实现单击和长按的区分，确保了在各种触摸屏设备上的良好交互体验。

/*封装移动端的tap点击事件*/
var demo={
    /*dom:传入的dom元素让我们可以为任意的元素添加tap事件*/
    tap:function(dom,callback){
        /*判断是否传入对象同时对象应该是一个dom元素*/
        if(!dom || typeof dom != "object"){
            return;
        }
        var startTime,startX,startY;
        dom.addEventListener("touchstart",function(e){
            /*判断是否只有一根手指进行操作*/
            if(e.targetTouches.length > 1){ //说明不止一个手指
                return;
            }
            /*记录手指开始触摸的时间*/
            startTime=Date.now();
            /*记录当前手指的坐标*/
            startX= e.targetTouches[0].clientX;
            startY= e.targetTouches[0].clientY;
            /*来做一些与事件相关的初始化操作*/
        })

        /*touchend：当手指松开时候触发，意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象*/
        dom.addEventListener("touchend",function(e){
            /*判断是否只有一根手指进行操作*/
            if(e.changedTouches.length > 1){ //说明不止一个手指
                return;
            }
            if(Date.now()-startTime > 150){ //长按操作
                return;
            }
            /*判断松开手指时的坐标与触摸开始时的坐标的距离差异*/
            var endX=e.changedTouches[0].clientX;
            var endY=e.changedTouches[0].clientY;
            /*这里暂且将距离差异定为6*/
            if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
                /*判断用户是否传入的回调函数*/
                callback && callback(e);
            }
        })
    }
};