700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 移动端触摸(touch)事件

移动端触摸(touch)事件

时间:2023-11-30 15:48:03

相关推荐

移动端触摸(touch)事件

Touch 事件

首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有,但在这里我还是有必需对这三个词进行一翻不必要的解释。

touchstart:手指触摸到一个 DOM 元素时触发。

touchmove:手指在一个 DOM 元素上滑动时触发。

touchend:手指从一个 DOM 元素上移开时触发。

这三个事件又分别对应三个相同的触摸列表:

touches:正在触摸屏幕的所有手指的一个列表。

targetTouches:正在触摸当前 DOM 元素上的手指的一个列表。

changedTouches:涉及当前事件的手指的一个列表。

ev事件返回的结果ev.touches[0]

Touch{identifier: 0, target: div#div2.box.right, screenX: 393, screenY: 273, clientX: 336,…} clientX:336clientY:86force:1identifier:0pageX:336pageY:86radiusX:11.5radiusY:11.5rotationAngle:0screenX:393screenY:273target:div#div2.box.right__proto__:Touch

提示:

上面就是一个 TouchList 列表。它对应的就是前面提到的三种事件(touchstart、touchmove、touchend)中的一种,在触发时生成的一个对象列表。列表里最有用的就是 Touch 对象了,Touch 对象里存放着对应事件的一些相关的信息,我们就是通过这种个事件里这些属性的有机结合来实现各种效果。

通过上面的 radiusX,radiusY,rotationAngle 这三个属性就可以计算出你的手指触摸手机屏幕时的一个接触面,只不过这个接触面是用一个近似的椭圆来表示,也就是说它不是一个真正意义上的接触面,而是一个大概的接触面。相信心细的朋友应该会看到 TouchList 对象里有一个 length 属性,并且它的值为 1 ,这说明当前只有一个手指触发了事件(比如:touchstart 事件),换句话说,此时你只有一个手指放到了手机屏幕上,这个手指对应的一些信息存放在 Touch 对象里。因为只有一个手指放在了屏幕上,所以这个 TouchList 里只有一个 Touch 对象,并且是第一个下标为 0 。TouchList 列表里还有一个 target 属性,这个应该很好理解,就是触摸的目标。

为了让你能更加立体地理解上面的这些属性,我专门从网上找了一段话来作为补充:

1.Touch.identifier:此 Touch 对象的唯一标识符。 一次触摸动作(我们指的是手指的触摸)在平面上移动的整个过程中,该标识符不变。 可以根据它来判断跟踪的是否是同一次触摸过程,此值为只读属性。

2.Touch.screenX:触点相对于屏幕左边沿的X坐标。只读属性。

3.Touch.screenY:触点相对于屏幕上边沿的Y坐标。只读属性。

4.Touch.clientX:触点相对于可见视区(visual viewport)左边沿的X坐标。不包括任何滚动偏移。只读属性。

5.Touch.clientY:触点相对于可见视区(visual viewport)上边沿的Y坐标。不包括任何滚动偏移。只读属性。

6.Touch.pageX:触点相对于HTML文档左边沿的X坐标。当存在水平滚动的偏移时,这个值包含了水平滚动的偏移。只读属性。

7.Touch.pageY:触点相对于HTML文档上边沿的Y坐标。当存在水平滚动的偏移时,这个值包含了垂直滚动的偏移。只读属性。

8.Touch.radiusX:能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。

9.Touch.radiusY:能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。

10.Touch.rotationAngle:它是这样一个角度值:由radiusX 和 radiusY描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面。只读属性。

11.Touch.force:手指挤压触摸平面的压力大小,从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。