移动端 js touch事件

随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开那些触摸事件。

触摸事件包含4个接口。
TouchEvent

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

Touch

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

TouchList

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

DocumentTouch

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

(参考于 https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events )

TouchEvent接口可以响应基本触摸事件(如单个手指点击),它包含了一些具体的事件,

事件类型:

touchstart : 触摸开始(手指放在触摸屏上)

touchmove : 拖动(手指在触摸屏上移动)

touchend : 触摸结束(手指从触摸屏上移开)

touchenter :移动的手指进入一个dom元素。

touchleave :移动的手指离开一个dom元素。

还有一个touchcancel,是在拖动中断时候触发。

事件属性:

altKey : 该属性返回一个布尔值,表示在指定的事件发生时,Alt 键是否处于按下状态, event.altKey=true|false|1|0

type : 触摸时触发的事件类型,比如touchstart

每个触摸事件都包括了三个触摸属性列表:

  1. touches:当前位于屏幕上的所有手指触摸点的一个列表。

  2. targetTouches:当前元素对象上所有触摸点的列表。

  3. changedTouches:涉及当前事件的触摸点的列表。

它们都是一个数组,每个元素代表一个触摸点。

每个触摸点对应的Touch都有三对重要的属性,clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件发生的位置对于屏幕的偏移量,clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量,不过区别是clientX/clientY不包括对象滚动而隐藏的偏移量,而pageX/pageY包括对象滚动而隐藏的偏移量。移开屏幕的那个触摸点,只会包含在changedTouches列表中,而不会包含在touches 和targetTouches 列表中, 所以changedTouches在项目当中会比较常用。

添加新评论