H5移动端和PC端分别监听触摸和鼠标滑动的方法

myDiv.addEventListener('touchstart', function (e) {

            console.log('开始touch');

            e.preventDefault()

            startX = e.touches[0].screenX

            startY = e.touches[0].screenY

        }, false);


        myDiv.addEventListener('touchend', function (e) {

            e.preventDefault()

            endX = e.changedTouches[0].screenX

            endY = e.changedTouches[0].screenY

            console.log(startY);

            console.log(endY);

            let moveX = endX - startX;

            let moveY = endY - startY;


            if ((Math.abs(moveX) > 40 || Math.abs(moveY) > 40)) {

                // 判断X轴移动的距离是否大于Y轴移动的距离

                if (Math.abs(moveX) > Math.abs(moveY)) {

                    // 左右

                    console.log(moveX > 0 ? '左' : '右')

                } else {

                    // 上下

                    console.log(moveY > 0 ? '上一个' : '下一个')

                }

            }

        }, false);


        myDiv.addEventListener('mousedown', function (e) {

            console.log('开始touch');

            startX = e.clientX

            startY = e.clientY

        });


        myDiv.addEventListener('mouseup', function (e) {

            endX = e.clientX

            endY = e.clientY

            console.log(startY);

            console.log(endY);

            let moveX = endX - startX;

            let moveY = endY - startY;


            if ((Math.abs(moveX) > 40 || Math.abs(moveY) > 40)) {

                // 判断X轴移动的距离是否大于Y轴移动的距离

                if (Math.abs(moveX) > Math.abs(moveY)) {

                    // 左右

                    console.log(moveX > 0 ? '左' : '右')

                } else {

                    // 上下

                    console.log(moveY > 0 ? '上一个' : '下一个')

                }

            }

        });

  • 当前日期:
  • 北京时间:
  • 时间戳:
  • 今年的第:18周
  • 我的 IP:3.140.250.157
农历
五行
冲煞
彭祖
方位
吉神
凶神
极简任务管理 help
+ 0 0 0
Task Idea Collect