移动WEB-屏幕触摸事件

1. 触屏事件概述

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

2. 常见的触屏事件

touchstart事件:当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 touchmove事件：当手指在屏幕上滑动的时候连续地触发 在这个事件发生期间，调用`preventDefault()`事件可以阻止滚动 touchend事件：当手指从屏幕上离开的时候触发 touchcancel事件：当系统停止跟踪触摸的时候触发 关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了 序号事件描述1touchstart手指触摸到一个DOM元素时触发2touchmove手指在一个DOM元素上滑动时触发3touchend手指从一个DOM元素上移开时触发3touchcancel当系统停止跟踪触摸的时候触发

3. 触摸事件对象（TouchEvent）

TouchEvent对象中有以下属性：

序号事件描述1touches正在触摸屏幕的所有手指的一个列表2targetTouches正在触摸当前DOM元素上的手指的一个列表（常用）3changedTouches手指状态发生了改变的列表，从无到有，从有到无变化 手指移动元素案例：// 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. 事件详解

上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：   bubbles(起泡事件的类型)   cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)   clientX(返回当事件被触发时，鼠标指针的水平坐标)   clientY(返回当事件触发时，鼠标指针的垂直坐标)   screenX(当某个事件被触发时，鼠标指针的水平坐标)   screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。   touches：表示当前跟踪的触摸操作的touch对象的数组。   targetTouches：特定于事件目标的Touch对象的数组。   changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。每个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延时问题

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

7.1 解决双击延时问题

禁用缩放，浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。 <mate name='viewport' content='user-scalable=no'>