移动端触摸事件(touchstart,touchend,touchmove)的使用!

touchstart 开始触摸 touchmove 移动时触 touchmove 结束时触发

触摸事件有三个属性对象,

1. touches对象 :表示当前触摸的手指个数,此对象中还包括集合

• clientX:clientY: 距离距离浏览器内容左上角的距离,
• screenX: screenY: 距离电脑窗口的距离
• pageX:pageY: 当前页面的距离包括滚动条距离

2. changedTouches 记录发生改变的触摸点集合
3. targetTouches 没有离开的触摸点集合

示例

            let x, y,x1,y1;
            document.addEventListener('touchstart', function (e) { //开始触摸事件
                if (e.touches.length === 1) { //触摸手指个数
                    x = e.touches[0].clientX;
                    y = e.touches[0].clientY;
                }
            });
            document.addEventListener('touchend',function (e) { //结束触摸
                if(e.changedTouches.length === 1){
                    x1 = e.changedTouches[0].clientX;
                    y1 = e.changedTouches[0].clientY;
                }
                let r = Math.abs(y1-y)>Math.abs(x1-x);
                if(r){
                    if(y1-y>60){
                        console.log('向下滑')
                    }else if(y1-y<-60&&y1-y<0){
                        console.log('向上滑')
                    }
                }
            })```