移动WEB-屏幕触摸事件

1. 触屏事件概述

1. 移动端浏览器兼容性比较好，我们不需要考虑JS的兼容性问题，可以放心的使用原生的JS写效果，但是 移动端也有自己独特的地方，比如触屏事件touch（也称触摸事件），Android和IOS都有。
2. touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或触控板操作。

2. 常见的触屏事件

1. touchstart事件:

   当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
   

2. touchmove事件：

   当手指在屏幕上滑动的时候连续地触发
   在这个事件发生期间，调用`preventDefault()`事件可以阻止滚动
   

3. touchend事件：

   当手指从屏幕上离开的时候触发
   

4. touchcancel事件：

   当系统停止跟踪触摸的时候触发
   关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了
   

   序号	事件	描述
   1	touchstart	手指触摸到一个DOM元素时触发
   2	touchmove	手指在一个DOM元素上滑动时触发
   3	touchend	手指从一个DOM元素上移开时触发
   3	touchcancel	当系统停止跟踪触摸的时候触发

3. 触摸事件对象（TouchEvent）

1. TouchEvent对象中有以下属性：

   序号	事件	描述
   1	touches	正在触摸屏幕的所有手指的一个列表
   2	targetTouches	正在触摸当前DOM元素上的手指的一个列表（常用）
   3	changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

2. 手指移动元素案例：

   // 1. 获取元素
   const div = document.querySelector('div')
   
   // 2. // 定义手指的初始位置变量
   let startX = 0  
   let startY = 0
   
   // 3. 定义盒子的初始位置变量
   let boxX = 0
   let boxY = 0
   
   // 4. 手指在元素上触摸事件
   div.addEventListener('touchstart', function(e) {
     // 获取手指初始位置	
     startX = e.targetTouches[0].pageX
     startY = e.targetTouches[0].pageY
     // 获取元素初始位置
     boxX = this.offsetLeft
     boxY = this.offsetTop  
   })
   
   // 5. 手指在元素上移动事件
   div.addEventListener('touchmove', function(e) {
     // 元素的位置 = 元素初始位置 + （手指移动后的位置 - 手指初始位置）  
     this.style.left = e.targetTouches[0].pageX - startX + boxX + 'px'
     this.style.top = e.targetTouches[0].pageY - startY + boxY + 'px'
     // 移动元素时，屏幕的默认滚动事件会触发，所以要阻止默认事件
     e.preventDefault()
   })
   

4. 事件详解

1. 上面的这些事件都会冒泡，也都可以取消。
2. 虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。
3. 所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：
     bubbles(起泡事件的类型)
     cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)
     clientX(返回当事件被触发时，鼠标指针的水平坐标)
     clientY(返回当事件触发时，鼠标指针的垂直坐标)
     screenX(当某个事件被触发时，鼠标指针的水平坐标)
     screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。
4. 除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。
     touches：表示当前跟踪的触摸操作的touch对象的数组。
     targetTouches：特定于事件目标的Touch对象的数组。
     changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
5. 每个Touch对象包含的属性如下:
     clientX：触摸目标在视口中的x坐标。
     clientY：触摸目标在视口中的y坐标。
     identifier：标识触摸的唯一ID。
     pageX：触摸目标在页面中的x坐标。
     pageY：触摸目标在页面中的y坐标。
     screenX：触摸目标在屏幕中的x坐标。
     screenY：触摸目标在屏幕中的y坐标。
     target：触目的DOM节点目标。

5. 示例

function load (){  

    document.addEventListener('touchstart',touch, false);  
    document.addEventListener('touchmove',touch, false);  
    document.addEventListener('touchend',touch, false);  

    function touch (event){  
        var event = event || window.event;  

        var oInp = document.getElementById("inp");  

        switch(event.type){  
            case "touchstart":  
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
            case "touchend":  
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
        }  

    }  
}  
window.addEventListener('load',load, false); 

6. 移动端拖动元素

7. 移动端click延时问题

1. 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放页面，所有点击第一下的时候，会等待看有没有点击
   第二下。

7.1 解决双击延时问题

1. 禁用缩放，浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<mate name='viewport' content='user-scalable=no'>