移动端有四个关于触摸的事件,分别是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. 【python】安装hyperscan-python

    环境centos6.2 1. 先安装hyperscan 主要参考http://blog.csdn.net/cheng_fangang/article/details/51143412 注意:里面2.8 ...

  2. Java+selenium之WebDriver的cookie,等待等高级操作(五)

    1. 操作cookie // 增加一个 name = "name",value="value" 的 cookie Cookie cookie = new Coo ...

  3. office之Excel 你会用 Ctrl + E 吗?

    从Excel97至现在的最新版本2016,如果评选Excel中最简单.易用.功能最强大的技巧,非2013版新增的“快速填充”(快捷键 Ctrl+E)莫属.向下拖动复制后,打开下拉菜单,就可以看到它的身 ...

  4. HBase describe table 参数说明

    创建user表 > create 'dimensoft:user', 'info' 查看表结构 > describe 'dimensoft:user' DESCRIPTION 'dimen ...

  5. SQL Server INSET/UPDATE/DELETE的执行计划

    DML操作符包括增删改查等操作方式. insert into Person.Address (AddressLine1, AddressLine2, City, StateProvinceID, Po ...

  6. MySql-8.0.12 安装教程

    MySql-8.0.12 安装教程随笔https://www.cnblogs.com/CrazyDemo/p/9409995.html MySQL 安装https://m.runoob.com/mys ...

  7. 统计各个数据库的各个数据表的总数,然后写入到excel中

    1.最近项目基本进入最后阶段了,然后会统计一下各个数据库的各个数据表的数据量,开始使用的报表工具,report-designer,开源的,研究了两天,发现并不是很好使,最后自己下班回去,晚上思考,想着 ...

  8. 一脸懵逼学习KafKa集群的安装搭建--(一种高吞吐量的分布式发布订阅消息系统)

    kafka的前言知识: :Kafka是什么? 在流式计算中,Kafka一般用来缓存数据,Storm通过消费Kafka的数据进行计算.kafka是一个生产-消费模型. Producer:生产者,只负责数 ...

  9. RPC远程过程调用实例

    什么是RPC RPC 的全称是 Remote Procedure Call 是一种进程间通信方式.它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数,而不用程序员显式编码这个远程 ...

  10. MySQL 官方 Docker 镜像的使用

    首先是pull image,这里我拉取的是5.6.35: $ sudo docker pull mysql:5.6.35 拉下来以后大可以按照官方的说明无脑启动,但是外部无法访问,所以绑定端口: $ ...