js的touch事件的实际引用

一开始做前端页面的时候，接触的也是js，但是随后便被简单高效的jquery吸引过去，并一直使用至今。

而js，则被我主观的认为底层技术而抛弃。

直到这几天工作需要，研究移动端页面的触屏滑动事件，搜索jquery 的相应技术支持实在繁琐（当然也可能是我对jquery的理解不够），而js只需几步简单定义即可。

由于对js的了解比较少，最简单的应用我都试了很久……下面就分享下js的touch事件的实际引用：

?

1 2 3 4 5 6 7

$( function (){ document.addEventListener( "touchmove" , _touch, false ); })   function _touch(event){ alert(1); }

以上代码不可避免的使用了jquery的某些东西，不使用jquery的可以忽略之。

相应的事件有：

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。

target:触摸的DOM节点坐标

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

1 2 3 4

touchstart:   // 手指放到屏幕上的时候触发  touchmove:   // 手指在屏幕上移动的时候触发  touchend:   // 手指从屏幕上拿起的时候触发  touchcancel:   // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

1 2 3 4

client / clientY： // 触摸点相对于浏览器窗口viewport的位置  pageX / pageY： // 触摸点相对于页面的位置  screenX /screenY： // 触摸点相对于屏幕的位置  identifier：  // touch对象的unique ID

http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

        1.touchstart:    //  手指放到屏幕上的时候触发 

        2.touchmove:    //  手指在屏幕上移动的时候触发 

        3.touchend:    //  手指从屏幕上拿起的时候触发 

        4touchcancel:    //  系统取消touch事件的时候触发。至于系统什么时候会取消，不详

属性

        1.client  /  clientY：//  触摸点相对于浏览器窗口viewport的位置 

        2.pageX  /  pageY：//  触摸点相对于页面的位置 

        3.screenX  /screenY：//  触摸点相对于屏幕的位置 

        4.identifier：  //  touch对象的unique  ID 

//touchstart事件   

function  touchSatrtFunc(e)  {   

        //evt.preventDefault();  //阻止触摸时浏览器的缩放、滚动条滚动等   

        var  touch  =  e.touches[0];  //获取第一个触点   

        var  x  =  Number(touch.pageX);  //页面触点X坐标   

        var  y  =  Number(touch.pageY);  //页面触点Y坐标   

        //记录触点初始位置   

        startX  =  x;   

        startY  =  y;   

}   

//touchmove事件 

function  touchMoveFunc(e)  {   

        //evt.preventDefault();  //阻止触摸时浏览器的缩放、滚动条滚动等   

        var  touch  =  evt.touches[0];  //获取第一个触点   

        var  x  =  Number(touch.pageX);  //页面触点X坐标   

        var  y  =  Number(touch.pageY);  //页面触点Y坐标   

        var  text  =  'TouchMove事件触发：（'  +  x  +  ',  '  +  y  +  '）';   

        //判断滑动方向   

        if  (x  -  startX  !=  0)  {   

                //左右滑动   

        }   

        if  (y  -  startY  !=  0)  {   

                //上下滑动   

        }   

}   

 

1、Touch事件简介
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时，触发ontouchstart；
当移动手指时，触发ontouchmove；
当移走手指时，触发ontouchend。
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2、Touch事件与Mouse事件的出发关系
在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事 件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会 触发上一个事件的mouseout事件。

3、gesture事件
Gesture事件，包括手指点击（click），轻拂 （flick），双击（double-click），手指的分开、闭合（scale）、转动（rotate）等一切手指能在屏幕上做的事情，它只在有两根 或多根手指放在屏幕上的时候触发，事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例） 信息和rotation（两根手指间连线转动的角度）信息。这个事件是对touch事件的更高层的封装，和touch一样，它同样包括 gesturestart，gesturechange，gestureend。
gesture事件触发过程：
Step 1、第一根手指放下，触发touchstart
Step 2、第二根手指放下，触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart
Step 9、提起第一根手指，触发touchend