移动端有四个关于触摸的事件,分别是touchstart、touchmove、touchend、touchcancel(比较少用), 它们的触发顺序是touchstart-->touchmove-->touchend-->click,所以touch事件触发完成后会接着触发click事件,需要注意一下 ,阻止一下事件冒泡就可以了。 
touch事件可以产生一个event对象,这个event对象除基本的一些属性外还附带了三个额外的属性:

touches

一个TouchList对象,包含当前所有屏幕上的触点的Touch对象,该属性不一定是当前元素的touchstart事件触发,需要注意。

targetTouches

也是一个TouchList对象,包含从当前元素touchstart事件触发的的触点的Touch对象,跟上面的touches区别于触发点不一样。

changedTouches

也是一个TouchList对象,对于touchstart事件, 这个TouchList对象列出在此次事件中新增加的触点。对于touchmove事件,列出和上一次事件相比较,发生了变化的触点。对于touchend,列出离开触摸平面的触点(这些触点对应已经不接触触摸平面的手指)。

touchend

这里要特别注意,touches和targetTouches只存储接触屏幕的触点,touchend时,touches和targetTouches是个空数组,所以要获取触点最后离开的状态要使用changedTouches。

Touch和TouchList

由Touch对象构成的数组,通过event.touches、event.targetTouches或者event.changedTouches取到。一个 Touch 对象代表一个触点,当有多个手指触摸屏幕时,TouchList就会存储多个Touch对象。Touch对象代表一个触点,可以通过TouchList[0]获取, 每个触点包含位置,大小,形状,压力大小,和目标 element属性。本文中只使用到Touch.pageX和Touch.pageY属性,更多介绍可以查看Touch属性介绍

touches, targetTouches, changedTouches 区别

1. touches: A list of information for every finger currently touching the screen
2. targetTouches: Like touches, but is filtered to only the information for finger touches that started out within the same node
3. changedTouches: A list of information for every finger involved in the event (see below) To better understand what might be in these lists, let’s go over some examples quickly

They vary in the following pattern:
1. When I put a finger down, all three lists will have the same information. It will be in changedTouches because putting the finger down is what caused the event.
  第一根手指触摸屏幕,三个事件获取的值相同。

2. When I put a second finger down, touches will have two items, one for each finger. targetTouches will have two items only if the finger was placed in the same node as the first finger. changedTouches will have the information related to the second finger, because it’s what caused the event
  第二根手指触摸屏幕,此时touches获取两个触摸点的信息。若触摸点在同一个对象上,targetTouches也获取两个触摸点的信息。changedTouches只保存第二个触摸点的信息。

3. If I put two fingers down at exactly the same time, it’s possible to have two items in changedTouches, one for each finger
  若同时用两根手指触摸屏幕,changedTouches 有两个列表分别表示两个触摸点的信息。

4. If I move my fingers, the only list that will change is changedTouches and will contain information related to as many fingers as have moved (at least one)
  如果移动触摸点,只有 changedTouches 会记录每个移动的触摸点信息

5. When I lift a finger, it will be removed from touchestargetTouches and will appear in changedTouches since it’s what caused the event
  当一个触摸点离开,它的信息列表将从touches,targetTouches移除,但是changedTouches会保存此触摸点信息。

6. Removing my last finger will leave touches and targetTouches empty, and changedTouches will contain information for the last finger
  最后一个触摸点离开,touchestargetTouches变成空值,而 changedTouches保存着最后一个离开的触摸点信息。

 
 

移动距离计算

基本知识介绍完,距离的计算方法也差不多很明确了,主要用到了Touch对象中的pageX和pageY属性,终点位置减开始位置即可获得。 代码如下:

var startX = startY = endX = endY = 0;
var dom = document.getElementById('main');
//touchStart事件
dom.addEventListener('touchstart',function(event){
var touch = event.targetTouches[0];
startX = touch.pageX;
startY = touch.pageY;
document.getElementById('start').value = startX + ',' + startY;
},false);
//touchmove事件
dom.addEventListener('touchmove',function(event){
var touch = event.targetTouches[0];
endX = touch.pageX;
endY = touch.pageY;
},false);
//touchend事件
dom.addEventListener('touchend',function(event){
document.getElementById('end').value = endX + ',' + endY;
document.getElementById('count').value = (endX - startX) + ',' + (endY - startY);
},false);

 

Touch事件详解及区别,触屏滑动距离计算的更多相关文章

  1. javaScript -- touch事件详解(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

  3. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  5. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  7. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  8. 移动端触屏滑动,JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  9. Unity3D NGUI UIPlayTween(原UIButtonTween)动画事件详解

    http://blog.csdn.net/asd237241291/article/details/8507817 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 Unity3D引擎技术 ...

随机推荐

  1. laravel 路由缓存

    使用路由缓存之前,需要知晓路由缓存只能用于控制器路由,不能用于闭包路由,如果路由定义中包含闭包路由将无法进行路由缓存,只有将所有路由定义转化为控制器路由或资源路由后才能执行路由缓存命令: php ar ...

  2. Linux编程学习笔记(二)

    续上个章节,这个章节主要是Linux的远程登录系统操作笔记 一. Linux一般作为服务器使用,但是服务器都是在机房的,所以不可能经常跑到机房去操作系统,所以使用远程登录系统,在Linux的系统一般使 ...

  3. uva11865 二分流量+最小生成树

    uva好题真多 本题用二分法找flow,把流量小于flow的全部筛掉,剩下的边建立最小树形图,如果权值大于c或者不能建图,那么修改二分边界 上代码,觉得最小树形图的代码很优美 /* 题意:给定n个点, ...

  4. json数据转为Map集合

    我是利用Gson来弄得Gson gson = new Gson();//显得出HashMap的类型Type type = new TypeToken<HashMap<String, Str ...

  5. axios 发送json数据

    var qs = require('qs'); axios.post(ajaxurl,qs.stringify({ username:'zhangsan', age:'18' })).then(fun ...

  6. 如何下载kubenetes最新的rpm包?

    一,新增aliyun的软件仓库 tee /etc/yum.repos.d/kubernetes.repo <<-'EOF' [kubernetes] name=Kubernetes bas ...

  7. EF Core Migration

    //添加migrations dotnet ef migrations add [名称] //根据model更新sql表结构 dotnet ef database update //删除最新的migr ...

  8. C# 之 HttpRequest 类

          Request对象派生自HttpRequest类,使 ASP.NET 能够读取客户端在 Web 请求期间发送的 HTTP 值,从客户端获取信息,浏览器的种类,用户输入表单的数据,Cooki ...

  9. Codeforces 356D Bacterial Melee dp

    Bacterial Melee 我们发现所有合法串都是原序列的某个子序列(这个子序列相邻元素相等) 的扩展, 比如子序列为abc, 那么aabbbc, abbbcc 等都是合法串. 所以我们只需要dp ...

  10. Codeforces 935E Fafa and Ancient Mathematics dp

    Fafa and Ancient Mathematics 转换成树上问题dp一下. #include<bits/stdc++.h> #define LL long long #define ...