关于移动端滑动事件

以前在公司开发webapp的时候,用的是插件swiper,只对touch事件也只是有所了解,今天火狐社区看了下文档,做些笔记。
1.touch事件通过手指与屏幕的触点信息为用户与界面的交互提供了便利,根据文档,touch事件的接口是基于一些更底层的支持手势应用的(当然这个就暂时不用管了)。 touch事件包含一组 touchList,touchList是一组touch points(或者称touch objects)的集合, 文档里的术语Touch指的就是touch point或touch object;每个touch point 映射一个手指与屏幕接触时的触点,touch point包含了该触点的相关信息,比如触点相对与文档或屏幕的坐标,每个touch point触点都有唯一的id--touchpoint.identifier(这个id很有用,在编程时可以通过它来调用某触点的信息从而完成更复杂的逻辑)。
2.核心的touch事件有四个:touchstart、touchmove、touchend、touchcancel(这个比较少用),在触发touch事件时,因为在移动端手指滑动时会默认地滚动页面,为了保证事件正常执行,必须先preventDefault()阻止页面滚动,并预先通过meta标签限制页面缩放。然后获取事件的当前触点
var touches=event.changedTouches;
changedTouches是最常用的当前触点集合,它是基于前一个事件的触点的,也就是说touchstart之后,再touchmove时,其中的触点的id不会改变。由此可以奠定事件逻辑的连贯性。在滑动事件中,虽然每个触点只保留有单独的位置等信息,但我们可以通过保存touchstart事件中某个触点的位置(比如保存到数组startPonits),再在touchmove事件中利用changedTouches触点的位置来比较,就能获得手指滑动方向的信息,然后判断用户是往上下左右方向滑动,从而开始执行对应的交互。
3.另外补充一点,以前看网友的讲解,移动端touch事件比传统的click事件要快些,具体相关以后再研究。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值