HTML5触摸事件演化tap事件介绍

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含HTML5,触摸事件,tap等相关知识,佚名希望在学习及工作中可以帮助到您

触摸事件是移动浏览器特有的HTML5事件，虽然click事件在pc和移动端更通用，但是在移动端会出现300ms延迟，较为影响用户体验，300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。所以触摸事件反应更快，体验更好。

触摸事件的类型：

为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。

注意: 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 event.preventDefault() 来阻止鼠标事件被触发。

标准的触摸事件

事件名称	描述	包含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.target`	当这个触点最开始被跟踪时(在 `touchstart` 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 `window` 或 `document` 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

IE10+的触摸事件

您可能想查找下面的文章:

2017-08-06一款利用html5和css3动画排列人物头像的实例演示
2017-08-062014年圣诞节倒计时网页的制作过程
2018-12-03HTML 5 event-source 标签是否违背了自定义标签才使用短横线的约定？
2018-12-03html5中设置或返回音视频是否在加载后即开始播放的属性autoplay
2018-12-03详细介绍h5中的history.pushState()使用实例
2017-08-06html5文字阴影效果text-shadow使用示例
2018-12-03HTML5必读书籍
2018-12-03canvas画矩形和svg画矩形的两种方法代码
2018-12-03HTML5和CSS3制作一个模态框实例
2018-12-03关于老版本的浏览器不兼容H5和C3的处理方法

IE指针事件
事件名称	描述（在触摸设备上）
MSPointerDown	触摸开始
MSPointerMove	接触点移动

HTML5触摸事件演化tap事件介绍

touchstart

touchmove

touchend

touchenter

touchleave

touchcancel

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容