多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### js判断手指的上滑,下滑,左滑,右滑,事件监听 原理: 1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY; 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 > 实际上手指在手机上面滑动时很难做到直上直下的滑动;只要稍微有点斜,就会被x轴的判断现行接管,而与我们的实际操作医院相背离。此时就需要添加特殊的判断技巧,代码如下: ```javascript   $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e.originalEvent.changedTouches\[0\].pageX,     startY = e.originalEvent.changedTouches\[0\].pageY;   });   $("body").on("touchmove", function(e) {     e.preventDefault();     moveEndX = e.originalEvent.changedTouches\[0\].pageX,     moveEndY = e.originalEvent.changedTouches\[0\].pageY,     X = moveEndX - startX,     Y = moveEndY - startY;     if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {       alert("left 2 right");     }     else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {       alert("right 2 left");     }     else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {       alert("top 2 bottom");     }     else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {       alert("bottom 2 top");     }     else{       alert("just touch");     }   }); ``` 以上代码,在测试时仍不能达到预期的效果,此时要注意到一个事实--$('body').height = 0; 故还应该在此基础上添加以下代码: ```javascript   var windowHeight = $(window).height(),   $body = $("body");   // console.log($(window).height()); //627   // console.log($('body').height()); //0   $body.css("height", windowHeight); //重要代码 ``` 以上代码结合在手机端就可以判断手指的上滑,下滑,左滑,右滑操作;