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

2020-04-24 19:38:48易采站长站整理

触摸事件是移动浏览器特有的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
 时触发。此事件没有冒泡过程。