js实现滑动触屏事件监听的方法
本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下：
functionspan_move_fun(){
varspan=document.getElementById("move_k");
varspan_left=$(span).offset().left;
varspan_top=$(span).offset().top;
varstart_left=$(span).offset().left;
varstart_top=$(span).offset().top;
span.addEventListener('touchstart',function(event){
event.preventDefault();
if(event.targetTouches.length==1){
vartouch=event.targetTouches[0];
span.style.position="absolute";
span_top=$(this).offset().top;
span_left=$(this).offset().left;
start_top=touch.pageY
start_left=touch.pageX
varleft=parseFloat(touch.pageX-start_left+span_left-30);
vartop=parseFloat(touch.pageY-start_top+span_top-73);
span.style.left=String(left)+'px';
span.style.top=String(top)+'px';
}
});
span.addEventListener('touchmove',function(event){
event.preventDefault();
if(event.targetTouches.length==1){
vartouch=event.targetTouches[0];
span.style.position="absolute";
varleft=parseFloat(touch.pageX-start_left+span_left-30);
vartop=parseFloat(touch.pageY-start_top+span_top-73);
span.style.left=String(left)+'px';
span.style.top=String(top)+'px';
}
});
span.addEventListener('touchend',function(event){
vartouch=event.changedTouches[0];
if(parseFloat(touch.pageX-start_left+span_left-30)<=-5||parseFloat(touch.pageX-start_left+span_left-30)>=620||parseFloat(touch.pageY-start_top+span_top-73)<=-38||parseFloat(touch.pageY-start_top+span_top-73)>=587){
span.style.left=String(span_left-30)+'px';
span.style.top=String(span_top-73)+'px';
}
event.stopPropagation();
});
}
js的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件
touchend在触摸结束时触发事件
touchmove这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的Android1.5中，在touchstart激发后激发一次，然后剩余的都和touchend差不多同时激发。
这三个事件都都有一个timeStamp的属性，查看timeStamp属性，可以看到顺序是touchstart->touchmove->touchmove->…->touchmove->touchend。
下面是一段代码实例：
document.getElementsByTagName_r('body')[0].addEventListener('touchstart',function(e){
nStartY=e.targetTouches[0].pageY;
nStartX=e.targetTouches[0].pageX;
});
document.getElementsByTagName_r('body')[0].addEventListener('touchend',function(e){
nChangY=e.changedTouches[0].pageY;
nChangX=e.changedTouches[0].pageX;
});
PS:
1.touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好，已经把这个问题完美的避免掉了。
2.注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。
PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与函数功能：
javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event
希望本文所述对大家的javascript程序设计有所帮助。