2021-05-25 移动端事件和点击延迟的解决

移动端事件

触屏事件  跟PC端不同 移动触发事件是手指点击

触摸事件对象

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

移动端拖动

1.touchstart、touchmove、touchend 可以实现拖动元素

2.但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY

3.移动端拖动的原理：    手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

4.手指移动的距离：  手指滑动中的位置 减去  手指刚开始触摸的位置

拖动元素三步曲：

（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置

（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子

（3） 离开手指 touchend:

classList属性是HTML5新增的一个属性，返回元素的类名

添加类：

element.classList.add（’类名’）；

移除类：

element.classList.remove（’类名’）;

切换类：

element.classList.toggle（’类名’）;

click 延时解决方案

//封装tap，解决click 300ms 延时

function tap (obj, callback) {

        var isMove = false;

        var startTime = 0; // 记录触摸时候的时间变量

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

            startTime = Date.now(); // 记录触摸时间

        });

        obj.addEventListener('touchmove', function (e) {

            isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击

        });

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

            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击

                callback && callback(); // 执行回调函数

            }

            isMove = false;  //  取反 重置

            startTime = 0;

        });

}

//调用 

  tap(div, function(){  // 执行代码  });