移动端左右滑动事件简单使用
移动端屏幕滑动监听
首先是一个左右滑动js的demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5测试</title>
</head>
<body>
<div id="box" >
</div>
<script src="/static/js/jquery.js"></script>
<script>
//定义变量，用于记录坐标和角度
var startx,starty,movex,movey,endx,endy,nx,ny,angle;
//开始触摸函数，event为触摸对象
function touchs(event){
//阻止浏览器默认滚动事件
event.preventDefault();
//获取DOM标签
var box = document.getElementById(\'box\');
//通过if语句判断event.type执行了哪个触摸事件
if(event.type=="touchstart"){
console.log(\'开始\');
//获取开始的位置数组的第一个触摸位置
var touch = event.touches[0];
//获取第一个坐标的X轴
startx = Math.floor(touch.pageX);
//获取第一个坐标的X轴
starty = Math.floor(touch.pageY);
//触摸中的坐标获取
}else if(event.type=="touchmove"){
console.log(\'滑动中\');
var touch = event.touches[0];
movex = Math.floor(touch.pageX);
movey = Math.floor(touch.pageY);
//当手指离开屏幕或系统取消触摸事件的时候
}else if(event.type == "touchend" || event.type == "touchcancel"){
//获取最后的坐标位置
endx = Math.floor(event.changedTouches[0].pageX);
endy = Math.floor(event.changedTouches[0].pageY);
console.log(\'结束\');
//获取开始位置和离开位置的距离
nx = endx-startx;
ny = endy-starty;
//通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
angle = Math.atan2(ny, nx) * 180 / Math.PI;
if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){
return false;
console.log(\'滑动距离太小\');
}
//通过滑动的角度判断触摸的方向
if(angle<45 && angle>=-45){
alert(\'右滑动\');
return false;
}else if(angle<135 && angle>=45){
alert(\'下滑动\');
return false;
}else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
alert(\'左滑动\');
return false;
}else if(angle<=-45 && angle >=-135){
alert(\'上滑动\');
return false;
}
}
}
//添加触摸事件的监听，并直行自定义触摸函数
box.addEventListener(\'touchstart\',touchs,false);
box.addEventListener(\'touchmove\',touchs,false);
box.addEventListener(\'touchend\',touchs,false);
</script>
</body>
</html>然后是一个实际使用的jq的demo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5测试</title>
</head>
<body>
<div id="box" >
</div>
<script src="/static/js/jquery.js"></script>
<script>
//定义变量，用于记录坐标和角度
var startx,starty,movex,movey,endx,endy,nx,ny,angle;
//开始触摸函数，event为触摸对象
function touchs(event){
//阻止浏览器默认滚动事件
event.preventDefault();
event.stopPropagation();
//获取DOM标签
//通过if语句判断event.type执行了哪个触摸事件
if(event.type=="touchstart"){
// console.log(\'开始\');
//获取开始的位置数组的第一个触摸位置
var touch = event.originalEvent.targetTouches[0];
//获取第一个坐标的X轴
startx = Math.floor(touch.pageX);
//获取第一个坐标的X轴
starty = Math.floor(touch.pageY);
return false;
//触摸中的坐标获取
}else if(event.type=="touchmove"){
// console.log(\'滑动中\');
var touch = event.originalEvent.targetTouches[0];
movex = Math.floor(touch.pageX);
movey = Math.floor(touch.pageY);
return false;
//当手指离开屏幕或系统取消触摸事件的时候
}else if(event.type == "touchend" || event.type == "touchcancel"){
//获取最后的坐标位置
endx = Math.floor(event.originalEvent.changedTouches[0].pageX);
endy = Math.floor(event.originalEvent.changedTouches[0].pageY);
console.log(\'结束\');
//获取开始位置和离开位置的距离
nx = endx-startx;
ny = endy-starty;
//通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
angle = Math.atan2(ny, nx) * 180 / Math.PI;
if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){
return false;
console.log(\'滑动距离太小\');
}
//通过滑动的角度判断触摸的方向
if(angle<45 && angle>=-45){
alert(\'右滑动\');
return false;
}else if(angle<135 && angle>=45){
alert(\'下滑动\');
return false;
}else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
alert(\'左滑动\');
return false;
}else if(angle<=-45 && angle >=-135){
alert(\'上滑动\');
return false;
}
}
return false;
}
function addMoveItem(){
//添加触摸事件的监听，并直行自定义触摸函数
var calendarid = $("#box");
calendarid.off("touchstart").on(\'touchstart\',touchs);
calendarid.off("touchmove").on(\'touchmove\',touchs);
calendarid.off("touchend").on(\'touchend\',touchs);
}
addMoveItem();
</script>
</body>
</html>
ps：移动端父级touch时间可能会覆盖掉自己的touch事件，子级使用touchend可以一定程度避免重复调用事件；
挖个小坑，谷歌浏览器去掉event.preventDefault();event.stopPropagation();