触摸时代的到来，离不开触摸事件 touch 事件用于移动端，可响应用户手指（或触控笔）对屏幕或者触控板操作，给基于触控操作，给基于触控的用户界面提供可靠的支持。 touch 相关的事件跟普通的其他 dom 事件一样使用，可以直接用 addEventListener 来监听和处理。 最基本的 touch 事件包括4个事件： 1. touchstart：当在屏幕上按下手指时触发 2. touchmove：当在屏幕上移动手指时触发 3. touchend：当在屏幕上抬起手指时触发 4. touchcancel：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的 touch 操作，即触发 touchcancel。一般会在 touchcancel 时暂停游戏、存档等操作。 ## 1、touch 事件与 click 事件 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。 因为双击缩放检测的存在，在移动设备屏幕上点击操作的事件执行顺序： touchstart(瞬间触发) ——> touchend ——> click(200 - 300ms延迟) > 如果你使用了触摸事件，可以调用 event.preventDefault() 来阻止鼠标事件被触发。 ## 2、touchstart 事件 当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。 ~~~ <div> 点击我！ </div> <script> var box = document.querySelector("div"); box.addEventListener("touchstart", function (e) { console.log('touchstart'); }); </script> ~~~ ## 3、touchmove 事件 当用户在触摸屏上移动触点(手指)的时候，触发这个事件。一定是先要触发 touchstart 事件，再有可能触发 touchmove 事件。 ​touchmove 事件的 target 与最先触发的 touchstart 的 target 保持一致。touchmove 事件和鼠标的 mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。 > 1. 即使手指移出了原来的 target 元素，则 touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。 > 2. touchmove 事件会多次重复触发，由于移动端计算资源宝贵，尽量保证事件节流。 ~~~ <div> <p></p> </div> <script> var i = 1; var box = document.querySelector("div"); var p = document.querySelector("p"); box.addEventListener("touchmove", function (e){ p.innerHTML = e.target.tagName + ", " + i++; }) </script> ~~~ ## 4、touchend 事件 ​ 当用户的手指抬起的时候，会触发 touchend 事件。如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。 > touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。 ## 5、touchcancel 事件 ​ 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同): * 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。 * 触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。 * 当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch对象被取消 > touchcancel 事件一般用于保存现场数据。比如：正在玩游戏，如果发生了 。touchcancel 事件，则应该把游戏当前状态相关的一些数据保存起来。