以前在公司开发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事件要快些,具体相关以后再研究。
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事件要快些,具体相关以后再研究。