触屏的左右滑动事件
“`
/滑屏效果 start /
var slider = {
//判断设备是否支持touch事件
touch:(‘ontouchstart’ in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider1:document.getElementById(‘main’),
//事件
events:{
handleEvent:function(event){
if(event.type == 'touchstart'){
this.start(event);
}else if(event.type == 'touchmove'){
this.move(event);
}else if(event.type == 'touchend'){
this.end(event);
}
},
//滑动开始
start:function(event){
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touch.pageX}; //取第一个touch的坐标值
endPos = {x:0};
slider.slider1.addEventListener('touchmove',this,false);
slider.slider1.addEventListener('touchend',this,false);
},
//移动
move:function(event){
//当屏幕有多个touch或者页面被缩放过,就不执行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x};
event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
},
//滑动释放
end:function(event){
var touch = event.targetTouches[0];
//判断是左移还是右移,当偏移量大于10时执行
if(endPos.x > 100){
goButton();
}else if(endPos.x < -100){
backButton();
}
//解绑事件
slider.slider1.removeEventListener('touchmove',this,false);
slider.slider1.removeEventListener('touchend',this,false);
}
},
//初始化
init:function(){
var self = this; //this指slider对象
if(!!self.touch){
self.slider1.addEventListener('touchstart',self.events,false)
}; //addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性
}
};
/*滑屏效果 end*/
“`s