移动端touch触屏滑动事件、滑动触屏事件监听！

移动端touch触屏滑动事件、滑动触屏事件监听！

 

1、触摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

目前移动端浏览器均支持这4个触摸事件，包括IE。因为触屏也支持MouseEvent，所以他们的顺序是须要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1

Apple在iOS 2.0中引入了触摸事件API，Android正迎头遇上这一事实标准，缩小差距。最近一个W3C工做组正协力制定这一触摸事件规范。

2、规范

这里咱们介绍几种普及得比较好的触摸事件，你能够在绝大多数现代浏览器中来测试这一事件（必须是触屏设备哦）：

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每一个触摸事件都包括了三个触摸列表，每一个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的全部手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每一个触摸点由包含了以下触摸信息（经常使用）：

identifier：一个数值，惟一标识触摸会话（touch session）中的当前手指。通常为从0开始的流水号（android4.1，uc）

target：DOM元素，是动做所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动做在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约至关于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不经常使用，欢迎你们反馈。

有了这些信息，咱们就能够依据这些事件信息为用户提供不一样的反馈了。

下面，我将为你们展现一个小demo，用touchmove实现的单指拖动:

/**
 * onTouchEvent
 */
var div = document.getElementById("div");
//touchstart相似mousedown
div.ontouchstart = function(e){
   //事件的touches属性是一个数组，其中一个元素表明同一时刻的一个触控点，从而能够经过touches获取多点触控的每一个触控点
   //因为咱们只有一点触控，因此直接指向[0]
   var touch = e.touches[0];
   //获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
   var x = touch.clientX;
   var y = touch.clientY;
};
//touchmove相似mousemove
div.ontouchmove = function(e){
   //可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
   e.preventDefault();
};
//touchend相似mouseup
div.ontouchup = function(e){
   //nothing to do
};

 

3、手势事件

       手势是指利用多点触控进行旋转、拉伸等操做，例如图片、网页的放大、旋转。须要两个或以上的手指同时触摸时才会触发手势事件。关于缩放咱们须要注意的一点 是元素的位置坐标：咱们一般使用offsetX、getBoundingClientRect等方法获取元素的位置坐标，但在手机浏览器中页面常常会在使 用中被缩放，那缩放后的元素坐标会改变吗？答案是有所差别。用一个情景来讲明这个问题：页面A加载完成后，JavaScript获 取到该元素在document中的坐标为(100,100)，接着用户放大了页面，此时用JavaScript再次输出元素坐标，依然仍是 (100,100)，但该元素在屏幕上的响应区域会根据缩放比例产生偏移。你能够打开那个打砖块游戏demo，等页面彻底加载完成后，再放大，此时你会发 现即便手指触摸在“touch here”区域外部，也能够控制到球板，由于区域发生了偏移。除非页面刷新或者恢复缩放，不然偏移量将一直存在。

/**
 * onGestureEvent
 */
var div = document.getElementById("div");
div.ongesturechange = function(e){
   //scale表明手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
   var scale = e.scale;
   //rotation表明旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
   var angle = e.rotation;
};

 

4、重力感应

重力感应较简单，只须要为body节点添加onorientationchange事件便可。在此事件中由window.orientation属性获得表明当前手机方向的数值。window.orientation的值列表以下：0：与页面首次加载时的方向一致-90：相对原始方向顺时针转了90°180：转了180°90：逆时针转了90°据我测试，Android2.1还没有支持重力感应。以上即目前的触屏事件，这些事件还没有并入标准，但已被普遍使用。本人Android2.1，未在其余环境下测试。