码迷,mamicode.com
首页 > 移动开发 > 详细

移动端触摸相关事件touch、tap、swipe

时间:2018-01-25 16:46:35      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:div   tps   概念   com   htm   内容   事件触发   属性   0ms   

一、事件定义及分类

1. click事件

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

 

2. touch类事件

触摸事件,有touchstart touchmove touchend touchcancel 四种之分

touchstart:手指触摸到屏幕会触发

touchmove:当手指在屏幕上移动时,会触发

touchend:当手指离开屏幕时,会触发

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

 

3. tap类事件

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

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

longTap: 手指长按屏幕会触发

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

doubleTap: 手指双击屏幕会触发

 

4. swipe类事件

滑动事件,有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

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

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

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

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

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

 

点一下,如图为相关事件触发的顺序,可以看到click事件在touchend之后

技术分享图片

快速点两下,如图为相关事件触发的顺序,可以看到click事件因为延迟的原因只触发了一次

技术分享图片

长按,如图为相关事件触发的顺序

技术分享图片

向右滑动一下,如图为相关事件触发的顺序

技术分享图片

长按的时候无意间触发了浏览器自身的复制文本功能,此时触发了touchcancel事件

技术分享图片

 

 2) 查看触发的事件对象

简单地修改,将事件监听中第三个参数置为true,输出完整的事件对象

addEvent(one, ‘tap click touchstart touchmove touchend touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap‘, true);

技术分享图片

这里重点关注这三个属性changedTouches、targetTouches、touches,第三方插件封装模拟其他事件时,常常用到这几个属性

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

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

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

 

2. 第三方插件监听

  1) 使用jquery

  为了查看三个属性的区别,简单地只监听一个事件

<script src="jquery.js"></script>
$(‘.one, .two, #test‘).on(‘touchstart‘, function(ev) {
    ev.stopPropagation(); 
    console.log(ev);
});

按下图顺序分五次触碰屏幕,发现event对象里没有那三个属性

技术分享图片

技术分享图片

 

  2) 改用zepto.js正常

<script src="zepto.js"></script>

技术分享图片

看第五次的touch

技术分享图片

看第二次的touch

技术分享图片

看第四次的touch

技术分享图片

由此可知:

touches记录的是屏幕上全部的触摸对象的信息

targetTouches记录的是当前DOM节点上全部的触摸对象的信息

changedTouches记录着触发该次事件的信息,一般长度为1

 

相应的数组对象内部为一系列坐标属性,可用来模拟其他事件如gesture手势事件等

技术分享图片

 

三、自定义手势事件gesture

手势事件只是概念型,目前还没有浏览器原生支持,按照概念可分为gesturestart gesturechange gestureend 三种事件

gesturestart:当有两根或多根手指放到屏幕上的时候触发

gesturechange:当有两根或多根手指在屏幕上,并且有手指移动的时候触发

gestureend:当倒数第二根手指提起的时候触发,结束gesture

 

按照定义,当分别将两根手指放到屏幕上的时候,会有如下顺序的事件触发:

1、第一根手指放下,触发touchstart

2、第二根手指放下,触发gesturestart

3、触发第二根手指的touchstart

4、立即触发gesturechange

5、手指移动,持续触发gesturechange

6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange

7、触发第二根手指的touchend

8、触发touchstart(多根手指在屏幕上,提起一根,会刷新一次全局 touch,重新触发第一根手指的touchstart)

9、提起第一根手指,触发touchend

 

内容参考:https://www.cnblogs.com/imwtr/p/5882166.html

 

移动端触摸相关事件touch、tap、swipe

标签:div   tps   概念   com   htm   内容   事件触发   属性   0ms   

原文地址:https://www.cnblogs.com/ljbkyBlog/p/8351637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!