移动端原生js使用touch事件监听滑动方向

本文主要是介绍移动端原生js使用touch事件监听滑动方向，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

let box = document.querySelector('body') // 监听对象
        let startTime = '' // 触摸开始时间
        let startDistanceX = '' // 触摸开始X轴位置
        let startDistanceY = '' // 触摸开始Y轴位置
        let endTime = '' // 触摸结束时间
        let endDistanceX = '' // 触摸结束X轴位置
        let endDistanceY = '' // 触摸结束Y轴位置
        let moveTime = '' // 触摸时间
        let moveDistanceX = '' // 触摸移动X轴距离
        let moveDistanceY = '' // 触摸移动Y轴距离
        box.addEventListener("touchstart", (e) => {
            startTime = new Date().getTime()
            startDistanceX = e.touches[0].screenX
            startDistanceY = e.touches[0].screenY
        })
        box.addEventListener("touchend", (e) => {
            endTime = new Date().getTime()
            endDistanceX = e.changedTouches[0].screenX
            endDistanceY = e.changedTouches[0].screenY
            moveTime = endTime - startTime
            moveDistanceX = startDistanceX - endDistanceX
            moveDistanceY = startDistanceY - endDistanceY
            console.log(moveDistanceX, moveDistanceY)
            // 判断滑动距离超过40 且 时间小于500毫秒
            if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
                // 判断X轴移动的距离是否大于Y轴移动的距离
                if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
                    // 左右
                    console.log(moveDistanceX > 0 ? '左' : '右')
                } else {
                    // 上下
                    console.log(moveDistanceY > 0 ? '上' : '下')
                }
            }
        })

原著地址：https://www.jb51.net/article/214885.htm

这篇关于移动端原生js使用touch事件监听滑动方向的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！