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

HTML5滑动(swipe)事件 移动端触摸(touch)事件

时间:2023-06-13 21:09:13

相关推荐

HTML5滑动(swipe)事件 移动端触摸(touch)事件

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

项目需求,需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性, 所以想到HTML5中的drag事件, 发现移动端android & IOS并不支持drag事件。现在让我们来介绍一下移动端的常用事件吧

一、click点击事件

单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟。

二、touch触摸事件

触摸事件,有touchstart touchmove touchend touchcancel 四种之分,常用的有:

touchstart:当有新手指触控到绑定的元素,会触发一次事件。

touchmove:当有手指放绑定的元素上会一直触发,从触发条件准确的说只有手指移动时才触发。但是经过测试,这一项检测十分灵敏,人为手指保持不动,系统也会侦测到细小的移动。所以会一直触发。

touchend:当有手指从绑定元素上抬起,会触发一次。

touchcancel:可由系统进行的触发(不常用事件),比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件。

2.1事件列表

在移动端中上面的三个触摸事件每个事件都有以下列表

changedTouches:保存了所有引发事件的手指信息

targetTouches:保存了当前对象上所有触摸点的列表;

touches:保存了当前所有触碰屏幕的手指信息

2.1.1事件属性(只读属性)

移动端触摸事件属性里的数组元素的属性:每个事件有列表,每个事件列表还有以下属性

pageX //相对于页面的 X 坐标,与 clientX 不同的是,他包括左边滚动的距离,如果有的话。

pageY //相对于页面的 Y 坐标,与 clientY 不同的是,他包括上边滚动的距离,如果有的话。

clientX //相对于视区的 X 坐标,不会包括左边的滚动距离。

clientY //相对于视区的 Y 坐标,不会包括上边的滚动距离。

screenX //相对于屏幕的 X 坐标

screenY //相对于屏幕的 Y 坐标

identifier // 表示每 1 个 Touch 对象 的独一无二的 identifier。有了这个 identifier 可以确保你总能追踪到这个 Touch对象。

target //手指所触摸的 DOM 元素

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

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

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

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

var pos = {x:e.touches[0].clientX,y:e.touches[0].clientY} /*获取移动端拖动滑动坐标*/

const touchY = e.touches[0].clientY - 79; //手指拖动竖坐标

比如:想获取手指拖动滑动的坐标位置,直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,

如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。

调用事件方法:

(1)jquery方法:$(document).bind("touchend", function(e){});

(2)javascript方法:document.addEventListener("touchend",function(e){});

三、tap类触碰事件

触碰事件,我目前还不知道它和touch的区别,一般用于代替click事件,有tap longTap singleTap doubleTap四种之分,有时会用tap代替click事件

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap:手指碰一下屏幕会触发

doubleTap:手指双击屏幕会触发

四、swipe滑动事件

滑动事件,有swipeswipeLeftswipeRightswipeUpswipeDown 五种之分

swipe:手指在屏幕上滑动时会触发

swipeLeft:手指在屏幕上向左滑动时会触发

swipeRight:手指在屏幕上向右滑动时会触发

swipeUp:手指在屏幕上向上滑动时会触发

swipeDown:手指在屏幕上向下滑动时会触发

五、gesture手势事件

当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别如下。

gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。

gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。

gestureend:当任何一个手指从屏幕上面移开时触发。

当有新手指触控到绑定的元素,会触发一次事件。

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