触摸事件是移动浏览器特有的HT ML 5事件，虽然click事件 在P c和移动端更通用，但是在移动端会出现300ms延迟，较为影响用户体验，300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。所以触摸事件反应更快，体验更好。
触摸事件的类型：
为了区别触摸相关的状态 改变 ，存在多种类型的触摸事件。可以通过检查触摸事件的&nbs p; TouchEvent.ty PE 属性来确定当前事件属于哪种类型。
注意: 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上 正常 工作）。如果你使用了触摸事件，可以调用 event.p rev entDefault() 来阻止鼠标事件被触发。
标准的触摸事件
| 事件名称 | 描述 | 包含touches数组 |
touchstart |
当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element | 是 |
touchmove |
当用户在触摸平面上移动触点时触发。 事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同， 哪怕当 touchmove 事件触发时，触点已经移出了该 element 。 |
是 |
touchend |
当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。 当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。 已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。 |
是 |
touchenter |
当触点进入某个 element 时触发。 此事件没有冒泡过程。 | 是 |
touchleave |
当触点离开某个 element 时触发。 此事件没有冒泡过程。 | 是 |
touchcancel |
当触点由于某些 原因 被中断时触发。有 几种 可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）： 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。 触点离开了文档窗口，而进入了浏览器的界面元素、插件 或者 其他外部内容区域。 当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。 |
是 |
触摸对象属性
| Touch.identifier | 返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指（或触摸笔等）所引发的所有事件中保持一致, 直到它离开触摸平面. |
| Touch.screenX | 触点相对于屏幕左边沿的的X坐标. 只读属性. |
| Touch.screenY | 触点相对于屏幕上边沿的的Y坐标. 只读属性. |
| Touch.clientX | 触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性. |
| Touch.clientY | 触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性. |
| Touch.pageX | 触点相对于HTML文档左边沿的的X坐标. 当存在水平 滚动的 偏移时, 这个值包含了水平滚动的偏移 . 只读属性. |
| Touch.pageY | 触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移 . 只读属性. |
| Touch.radiusX | 能够包围用户和触摸平面的接触面的最小椭 圆 的水平轴(X轴) 半 径. 这个值的单位和 screenX 相同. 只读属性. |
| Touch.force | 手指挤压触摸平面的 压力 大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性. |
| Touch.radiusY | 能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性. |
| Touch.t arg et |
当这个触点最 开始 被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动 过程中 , 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防 止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性. |
IE10+的触摸事件
| MSPointerDown | 触摸开始 |
| MSPointerMove | 接触点移动 |
| MSPointerUp | 触摸结束 |
| MSPointerOver | 触摸点移动到元素内，相当于mouseover |
| MSPointerOut | 触摸点离开元素，相当于mouseout |
MSPointerEvent属性
| hwTimest am p | 创建事件的时间（ms） |
| is Primary | 标识该指针是不是主指针 |
| pointerId | 指针的唯一ID（类似于触摸事件的标识符） |
| pointerType | 一个整数，标识了该事件来自鼠标、 手写笔 还是手指 |
| Press ure | 笔的压力，0-255，只有手写笔输入时才可用 |
| rotation | 0-359的整数， 光标 的旋转度（如果支持的话） |
| tiltX/tiltY | 手写笔的倾斜度，只有用手写笔输入时才支持 |
等价事件
| 鼠标 | 触摸 | 键盘 |
| mousedown | touchstart | keydown |
| mou SEM ove | touchmove | keydown |
| mouseup | touchend | keyup |
| mouseover | focus |
很显然，触摸动作序列：touchstart -t ouchmove-touchend和鼠标序 列：mousedown-mousemove-mouseup以及键盘序列：keydown-key PR ess-keyup很相似，这并不是巧合，因为这 三种交互模式都可以描述为start-move -s top。
话说回来，click要经过touchstart-touchmove-touchend流程，300ms延迟，所以需要tap事件，tap就是在同一个点轻触时间很短。
封装好的tap和longtap事件
XM L/HTML Code 复制内容到剪贴板
(function() { VAR TOUCHSTART, TOUCHEND; if (typeof(window.ontouchstart) != 'un define d') { TOUCHSTART = 'touchstart' ; TOUCHEND = 'touchend' ; TOUCHMOVE = 'touchmove' ; } else if (typeof(window.onmspointerdown) != 'undefined') { TOUCHSTART = 'MSPointerDown' ; TOUCHEND = 'MSPointerUp' ; TOUCHMOVE = 'MSPointerMove' ; } else { TOUCHSTART = 'mousedown' ; TOUCHEND = 'mouseup' ; TOUCHMOVE = 'mousemove' ; } function NodeTouch(node) { this._node = node; } function tap(node,callback,scope) { node.addEventListener(TOUCHSTART, function(e) { x = e .touches[0].pageX; y = e .touches[0].pageY; }); node.addEventListener(TOUCHEND, function(e) { e.stopPropagation(); e.preventDefault(); var curx = e .changedTouches[0].pageX; var cury = e .changedTouches[0].pageY; if (Math.abs(curx - x) < 6 && ;m ath.abs(cury - y) < 6 ) { callback.apply(scope, argument s); } }); } function longTap(node,callback,scope) { var x,y, startTime = 0 , endTime = 0 , in_dis = false ; node.addEventListener(TOUCHSTART, function(e) { x = e .touches[0].pageX; y = e .touches[0].pageY; startTime =(new Date()).getTime(); }); node.addEventListener(TOUCHEND, function(e) { e.stopPropagation(); e.preventDefault(); var curx = e .changedTouches[0].pageX; var cury = e .changedTouches[0].pageY; if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6 ) { in_dis = true ; }else{ in_dis = false ; } endTime =(new Date()).getTime(); if (endTime - startTime > 300 && in_dis) { callback.apply(scope, arguments); } }); } NodeTouch.prototype.on = function (evt, callback, scope) { var scopeObj; var x,y; if (!scope) { scopeObj = this ._node; } else { scope scopeObj = scope; } if ( evt === 'tap') { tap(this._node,callback,scope); } else if( evt == = 'longtap'){ longTap(this._node,callback,scope); } else { this._node.addEventListener(evt, function() { callback.apply(scope, arguments); }); } return this; } window.$ = function(selector) { var node = document .querySelector(selector); if (node) { return new NodeTouch(node); } else { return null; } } })(); var box =$(" # box"); box.on("longtap",function(){ console. LOG ("你已经长按了"); },box)
以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址： http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html
总结
以上是 为你收集整理的 HTML5触摸事件演化tap事件介绍 全部内容，希望文章能够帮你解决 HTML5触摸事件演化tap事件介绍 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5触摸事件演化tap事件介绍的详细内容...