JS手机端touch事件计算滑动距离的方法
计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下：
function wetherScroll(){
var startX = startY = endX =endY =0;
var body=document.getElementsByTagName(“body”);
body.bind(‘touchstart’,function(event){
var touch = event.targetTouches[0];
//滑动起点的坐标
startX = touch.pageX;
startY = touch.pageY;
// console.log(“startX:”+startX+","+“startY:”+startY);
});
body.bind(“touchmove”,function(event){
var touch = event.targetTouches[0];
//手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
endX = touch.pageX;
endY = touch.pageY;
// console.log(“endX:”+endX+","+“endY:”+endY);
})
body.bind(“touchend”,function(event){
var distanceX=endX-startX,
distanceY=endY - startY;
// console.log(“distanceX:”+distanceX+","+“distanceY:”+distanceY);
//移动端设备的屏幕宽度
var clientHeight; =document.documentElement.clientHeight;
// console.log(clientHeight;0.2);
//判断是否滑动了，而不是屏幕上单击了
if(startY!=Math.abs(distanceY)){
//在滑动的距离超过屏幕高度的20%时，做某种操作
if(Math.abs(distanceY)>clientHeight0.2){
//向下滑实行函数someAction1，向上滑实行函数someAction2
distanceY <0 ? someAction1():someAction2();
}
}
startX = startY = endX =endY =0;
})
}
参考链接
JS手机端touch事件计算滑动距离的方法相关推荐
- Three.js 手机端 touch用法
1.加入监听 container.addEventListener('touchstart', onDocumentTouchStart, false); container.addEventLis ...
- JS手机端移动端长按longtap事件
JS手机端移动端长按longtap事件移动端并没有所谓的longtap事件,即长按事件.但是,有时候会用到,只能借助touchstart.touchmove.touchend三个事件以及延迟setTi ...
- 手机端带二级菜单滑动导航的实现
手机端带二级菜单滑动导航的实现 实现的效果图: Swiper插件是开源.免费.强大的移动端触摸滑动插件.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.这个效果是freemode ...
- 总结一些谷歌新版本浏览器测试手机端swipe事件遇到的问题
最近使用谷歌新版本浏览器测试手机端swipe事件时碰到无效的效果, 原因是谷歌新版浏览器禁止了移动端的一些默认事件,具体解决方法如下: 1.改body加上css样式: body{touch-actio ...
- 轮番滑动PHP,touch事件之滑动判断（左右上下方向）
touch事件之滑动判断(左右上下方向) 作者: 2020.03.11 本文发布于18天前 分类: $("body").on("touchstart", fun ...
- python公式计算_Python Numpy计算各类距离的方法
详细: 1.闵可夫斯基距离(Minkowski Distance) 2.欧氏距离(Euclidean Distance) 3.曼哈顿距离(Manhattan Distance) 4.切比雪夫距离(Ch ...
- js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- zepto.js手机端开宝箱动画js特效
下载地址 zepto.js实现的手机端开宝箱动画特效 dd:
- 移动WEB开发之JS内置touch事件[转]
iOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计 出来的.Cli ...
最新文章
- GDB 使用手册(谷歌翻译)
- Redis的常用命令——set的常用命令
- 深度学习之循环神经网络（3）梯度传播
- word2003如何设置护眼模式_ERP系统上线，如何设置采购收货的模式，提升企业的采购效率...
- ubuntu下使用openocd+jlink进行STM32开发调试
- Javascript（二）——函数（重载、回调）与作用域（附图解）
- win8远程访问mysql_Windows 安装 mysql8.0 配置远程访问
- html如何添加子页面,html5 父页面调用子页面js方法
- 一线城市程序员平均工资11770元，你拖后腿了吗？
- sql转化为int类型
- kubernetes资源--RC和RS
- EntityFramework6.X 之 Operation
- Mac 下如何安装odps eclipse插件
- Tomcat7.0下配置javabeanservlet路径问题
- 电视android降低版本,电视猫旧版本下载-电视猫视频去升级版3.1.3 安卓版下载_飞翔下载...
- 理论小知识：字符串mset命令
- 向量的内积（点积）、叉积（向量积）
- [gdc13]古墓丽影DirectX11技术
- Linux内核踩坑笔记
- windows配置mysql8.0主从数据库，主从数据同步。