HTML5 触屏事件

Posted 2021-03-30 图灵编程俱乐部

触屏事件

为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力.

主要接口

• TouchEvent

代表当触摸行为在平面上变化的时候发生的事件.

• Touch

代表用户与触摸平面间的一个接触点.

• TouchList

代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.

• DocumentTouch

包含了一些创建 Touch对象与TouchList对象的便捷方法.

---

TouchEvent类型

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

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

touchstart

当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element

touchend

当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

事件的目标 element 和这个 touchend 事件对应的 touchstart 事件的目标 element 相同，哪怕touchend 事件触发时，触点已经移出了该 element 。

已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。

touchmove

当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同，哪怕当 touchmove 事件触发时，触点已经移出了该 element 。

当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。

注意: 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率




touchcancel

‍

当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：

• 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。

• 触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。

• 当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。

示例 1 

TouchEvent 事件类型演示




示例2

对比 触屏事件 和 鼠标事件




小结 ：几种不同的交互模式触发的事件顺序不同。




❤️爱心三连击

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我们创作的动力。

 回复「沙龙」参加线上线下技术沙龙； 回复「python」参加python训练营； 回复「java」参加2020版企业实战Java精英线下课程； 回复「图灵编程」了解图灵IT青年俱乐部；