触屏事件与案例

1触屏事件概述

移动端兼容性较好，不需要考虑JS兼容性问题，可以使用原生JS书写，但是移动端有独特的事件，比如触屏事件（touch）。
常见的触屏事件如下：

2 触摸对象事件（TouchEvent）

是描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。
用于描述一个或多个触电，使开发者可以检测触点的移动，触电的增加和减少等。
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点有三个常见对象列表：

3 移动端拖动元素

1. touchstart、touchmove、touchend可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
3. 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
4. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置
   拖动元素三步曲：
   （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
   （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
   （3） 离开手指 touchend:
   注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

代码：

 <style>
    div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>

<div></div>

<script>
    let div = document.querySelector('div')
    let x = 0
    let y = 0

    let divX = 0
    let divY = 0

    div.addEventListener('touchstart',function(e){
        x = e.targetTouches[0].pageX
        y = e.targetTouches[0].pageY

        divX = this.offsetLeft
        divY = this.offsetTop
    })

    div.addEventListener('touchmove',function(e){
        let moveX = e.targetTouches[0].pageX - x
        let moveY = e.targetTouches[0].pageY - y

        this.style.left = divX + moveX + 'px'
        this.style.top = divY + moveY + 'px'
          
        e.preventDefault()
    })
</script>