HTML5触摸事件

为什么要用触摸事件？

触摸事件是移动浏览器特有的HTML5事件，但这当然不是用触摸事件的主要理由。因为移动端的click有很大延迟（大约300ms），300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。而触摸事件的延迟则是非常短的，使用触摸事件的能够提高页面响应速度，带来更好的用户体验。

标准的触摸事件

Webkit内的触摸事件

事件名称	描述	包含touches数组
touchstart	触摸开始（用户把手指放在屏幕上）	是
touchmove	接触点改变（用户在屏幕上移动他的手指且手指不离开屏幕）	是
touchend	触摸结束（用户的手指离开屏幕）	是
touchcancel	触摸被取消（触摸被一些事情中断，比如通知）	否

P.S.touches数组是触摸对象数组，触摸对象携带着我想要的数据

触摸对象的属性

属性	描述
identifier	本次触摸的唯一标识符，只要用户的手指保持在屏幕上，这个值就不会改变
screenX	触点相对于屏幕左侧的距离
screenY	触点相对于屏幕顶部的距离
clientX	触点相对于浏览器窗口左侧的距离
clientY	触点相对于浏览器窗口顶部的距离
pageX	触点相对于页面左侧的距离
pageY	触点相对于页面顶部的距离
target	获取事件源，类似于event.target

P.S.其实还有三个属性：radiusX/radiusY，rotationAngle，force但由于兼容性差且浏览器实现有差异，在此不做介绍

IE10的触摸事件

IE指针事件

事件名称	描述（在触摸设备上）
MSPointerDown	触摸开始
MSPointerMove	接触点移动
MSPointerUp	触摸结束
MSPointerOver	触摸点移动到元素内，相当于mouseover
MSPointerOut	触摸点离开元素，相当于mouseout

P.S.IE叫指针事件，因为该事件有三种触发形式：鼠标单击，电子笔轻触和手指触摸

MSPointerEvent属性

属性	描述
hwTimestamp	创建事件的时间（ms）
isPrimary	标识该指针是不是主指针
pointerId	指针的唯一ID（类似于触摸事件的标识符）
pointerType	一个整数，标识了该事件来自鼠标、手写笔还是手指
pressure	笔的压力，0-255，只有手写笔输入时才可用
rotation	0-359的整数，光标的旋转度（如果支持的话）
tiltX/tiltY	手写笔的倾斜度，只有用手写笔输入时才支持

检测pointerType：

function handleEvent(event){    switch (event.pointerType){      case event.MSPOINTER_TYPE_TOUCH:    //手指    break ; case event.MSPOINTER_TYPE_PEN:    //手写笔    break ; case event.MSPOINTER_TYPE_MOUSE:    //鼠标    break ;   default :     break ;    } } document.body.addEventListener( "MSPointerDown" , handleEvent, false );

封装好tap事件源码：（tap即移动端的click）

( function (){      var TOUCHSTART, TOUCHEND;      //normal touch events      if ( typeof (window.ontouchstart) != 'undefined' ) {          TOUCHSTART = 'touchstart' ;          TOUCHEND   = 'touchend' ;      //microsoft touch events      } else if ( typeof (window.onmspointerdown) != 'undefined' ) {          TOUCHSTART = 'MSPointerDown' ;          TOUCHEND   = 'MSPointerUp' ;      } else {          TOUCHSTART = 'mousedown' ;          TOUCHEND   = 'mouseup' ;      }      function NodeFacade(node){          this ._node = node;      }      NodeFacade.prototype.getDomNode = function () {          return this ._node;      }      NodeFacade.prototype.on = function (evt, callback, scope) {          var scopeObj;          if (!scope) {              scopeObj = this ._node;          } else {              scopeObj = scope;          }          if (evt === 'tap' ) {              this ._node.addEventListener(TOUCHSTART, function () {                  callback.apply(scope, arguments);              });          } else if (evt === 'tapend' ) {              this ._node.addEventListener(TOUCHEND, function () {                  callback.apply(scope, arguments);              });          } else {              this ._node.addEventListener(evt, function () {                  callback.apply(scope, arguments);              });          }          return this ;      }      window.$ = function (selector) {          var node = document.querySelector(selector);          if (node) {              return new NodeFacade(node);          } else {              return null ;          }      } })();

P.S.以上源码来自touch-interfaces.com

参考资料

《HTML5触摸界面设计与开发》

原文地址：http://www.ayqy.net/blog/html5触摸事件/?utm_source=tuicool&utm_medium=referral