html5手势滑动效果,html5手势滑动实现（单点）

html 中有5个触屏事件，可去 http://www.w3school.com.cn，进行查阅。因而本文使用原生态的js实现单点触摸的手势操作

实现原理很简单，使用touchstart 和 touchend 事件，获取手指滑动时的起始坐标(x1,y1)、终点坐标(x2,y2)，通过该两点的计算，可以判断出手势的活动方向，来触发对应的事件。

实现代码：

1. Dom元素添加触屏事件(此处使用最好使用原生态js的addEventListener方法，而是用jquery的blind的方法添加事件似乎没有反应，至于其中缘由我也没搞明白)。

document.getElementById("play").addEventListener("touchstart", function(e){fun_touchEvent(e)}, false);

document.getElementById("play").addEventListener("touchend", function(e){fun_touchEvent(e)}, false);

2. 响应的触屏函数

/**触摸点距屏幕位置获取，

*com_touchX和com_touchY是已经定义好的全局变量

*@param event 事件

*@param intType (可选) 返回处理类型，当有多个触屏事件时，用来标记对应的处理方法

*/

function fun_touchEvent(event,intType){

switch (event.type) {

case "touchstart":

event.preventDefault();

com_touchX=event.touches[0].screenX;//距屏幕左边的距离，此处可用pageX(似乎没有效果)或clientX，

com_touchY=event.touches[0].screenY;

break;

case "touchend":

var x=event.changedTouches[0].screenX;

var y=event.changedTouches[0].screenY;

fun_touchReturn(x-com_touchX,y-com_touchY,intType);//触屏结束触发的回调处理函数

break;

}

}

3.回调处理函数

/**触屏结束的回调函数

*@param   x   水平滑动的距离

*@param   y   垂直滑动的距离

*@param   intType   对应的处理方法

*/

function fun_touchReturn(x,y,intType){

if(x>0){

//向右滑动

//对应的处理事件

''''''''''''''''''''''''

}else{

//向左滑动

//对应的处理事件

''''''''''''''''''''''''

}

//其他响应的手势

}

存在的问题：由于给在为在响应触屏事件时，添加了event.preventDefault()使得dom元素原有的响应事件会被阻止，当该元素既需要手势操作又需要原有的响应事件时出现矛盾，寻求大神给解决方法