首页 > 移动平台 > 详细

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

时间:2021-09-11 15:29:51      阅读:6      评论:0      收藏:0      [点我收藏+]
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事件监听滑动方向

原文:https://www.cnblogs.com/liangziaha/p/15253382.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!