移动端手势事件及长按事件模拟

最新推荐文章于 2024-09-08 13:28:47 发布

那些年少的伤寂静微凉

最新推荐文章于 2024-09-08 13:28:47 发布

阅读量1.3k

点赞数

分类专栏： H5 技术移动端事件文章标签：移动端 touch事件

本文链接：https://blog.csdn.net/FarmerXiaoYi/article/details/85787420

版权

H5 技术同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

移动端事件

1 篇文章 0 订阅

订阅专栏

本文介绍了一种在移动端H5应用中模拟实现长按及手势滑动事件的方法，通过监听touchstart、touchmove和touchend事件，计算手指移动的方向和速度，从而触发自定义的长按、左右滑动及上下滑动事件。

摘要由CSDN通过智能技术生成

H5原生事件中为移动端增加了3个触控事件，touchstart、touchmove、touchend；但是我们在实际使用手机时有长按和手势动作，但是原生并没有给我们封装类似的事件，所以我们需要模拟实现。

(function () {
    const touch = new Event("touch"),
        longTop = new Event("longTop"),
        swipeLeft = new Event("swipeLeft"),
        swipeRight = new Event("swipeRight"),
        swipeBottom = new Event("swipeBottom"),
        swipeTop = new Event("swipeTop");
    var eventStart, eventEnd, eventX, eventY, diffX, diffY, changeNum;
    document.addEventListener("touchstart", function (e) {
        eventStart = e.timeStamp;
        eventX = e.targetTouches[0].screenX;
        eventY = e.targetTouches[0].screenY
    });
    document.addEventListener("touchmove", function (e) {
        //手势改变的数据必须在move阶段才能获取，并计算出手势方向
        diffX = e.targetTouches[0].screenX - eventX;
        diffY = e.targetTouches[0].screenY - eventY;
        changeNum = Math.abs(diffX) - Math.abs(diffY)
    });
    document.addEventListener("touchend", function (e) {
        if (diffX && diffY && changeNum) {
            if (changeNum > 0) {
                if (diffX > 0) {
                    e.target.dispatchEvent(swipeRight)
                } else {
                    e.target.dispatchEvent(swipeLeft)
                }
            } else {
                if (diffY < 0) {
                    e.target.dispatchEvent(swipeTop)
                } else {
                    e.target.dispatchEvent(swipeBottom)
                }
            }
        } else {
            eventEnd = e.timeStamp;
            //计算从手指接触屏幕到离开的时间，从而判断长按还是短按
            let c = eventEnd - eventStart;
            if (c >= 300) {
                e.target.dispatchEvent(longTop)
            } else {
                e.target.dispatchEvent(touch)
            }
        }
    });
})()