js判断左右上下滑动触发的事件
来源:互联网 发布:淘宝排名收费 编辑:程序博客网 时间:2024/05/22 14:06
原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY;
2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。
相关代码:
$("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 ( X > 0 ) {
alert("left 2 right");
}
else if ( X < 0 ) {
alert("right 2 left");
}
else if ( Y > 0) {
alert("top 2 bottom");
}
else if ( Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
但是:
实际上手指在手机上面滑动时很难做到直上直下的滑动;只要稍微有点斜,就会被x轴的判断现行接管,而与我们的实际操作医院相背离。此时就需要添加特殊的判断技巧,代码如下:
$("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;
故还应该在此基础上添加以下代码:
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height()); //627
// console.log($('body').height()); //0
$body.css("height", windowHeight); //重要代码
以上代码结合在手机端就可以判断手指的上滑,下滑,左滑,右滑操作;
- js判断左右上下滑动触发的事件
- jQuery -- touch事件之滑动判断(左右上下方向)
- jQuery -- touch事件之滑动判断(左右上下方向)
- SwipeRefreshLayout上下刷新与左右滑动事件冲突的处理
- js的左右滑动触屏事件
- 左右滑动与上下滑动的冲突
- 手机左右上下滑动插件--iscroll.js
- 移动端的左右滑动DEMO,解决了左右滑动而不能上下滑动的事件冲突
- ViewPage左右滑动和PullToRefreshListView上下滑动事件冲突
- js判断事件的触发类型
- 用JS 这些实现左右滑动 上下滑动
- 左右上下滑动表格
- android事件分发机制(从原理上解决左右滑动很上下滚动的矛盾)
- Android精简小笔记(7):左右滑动屏幕事件的触发:
- TextView的上下滑动,左右滑动跑马灯
- android 简单的 左右上下手势 判断
- 滑动事件左右滑动
- js的触发事件
- 匹配中文字符的正则表达式: [u4e00-u9fa5](
- activiti在启动的时候报空指针
- 生产环境下重启puma
- echarts图表导出excel示例
- Linux线程编程
- js判断左右上下滑动触发的事件
- 一维OTSU法、最小交叉熵法、二维OTSU法及C++源码
- am335x led驱动。
- mybatis逆向生成 eclipse逆向生成工具mybatis generator使用
- Android中IntentService的原理及使用
- Unity中基于Gpu Instance进行大量物体渲染的实现与分析(一)
- 【组合数学思维】CodeForces
- css
- (多核DSP快速入门)5.SYS/BIOS的使用实例分析