[文章内容简介]：移动端 触摸事件简介

 

ontouchstart、ontouchmove、ontouchend、ontouchcancel

在手机端页面开发时，大部分会需要实现移动端手机触发事件的使用。  

其中touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。

其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件。 

touch事件就是其字面直译“触摸”。所以只要手指接触到屏幕并不需要滑动就会触发相关的事件

1、Touch事件简介

pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod  Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。

在touch事件中三个主要动作：

触发touchstart：：触摸开始的时候触发，即手指接触到屏幕就触发了；

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

触发touchend：触摸结束的时候触发，即手指离开屏幕时触发；

当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

 

2、事件绑定：

banner.addEventListener('touchstart', touchStart, false);

banner.addEventListener('touchmove', touchMove, false);

banner.addEventListener('touchend', touchEnd, false);

事件绑定中需要注意的是：jquery库的bind方法会出现绑定无效的问题，有的jquery版本是可以的。

函数定义中需要注意的是在touchmove中浏览器的默认事件是移动页面，比如上下滚动，在touchmove中需要禁止浏览器的默认动作，否则会影响到touchmove的触发，尤其是在android中，iphone对这个处理的较好，影响较小。touchmove是一个会在move

 

3、Touch事件与Mouse事件的出发关系

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

 

捕获触摸点位置：

在触摸事件中捕获到事件e,e会有一个属性touches，e.touches表示的在屏幕上所有的触摸点，但事实上，绝大数手机浏览器并不支持多点触摸，所有用e.touchees[0]捕获一个触点就知足吧，不要再奢望获取e.touches[>0]了，这个触点的位置可以有e.touches[0].pageX获取页面x坐标（像素）；