js,JavaScript 监听 判断 移动端 滑动事件
<script>
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
}; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0; //如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
} var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
} return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
alert("未滑动!");
break;
case 1:
alert("向上!")
break;
case 2:
alert("向下!")
break;
case 3:
alert("向左!")
break;
case 4:
alert("向右!")
break;
default:
}
}, false);
</script>
js,JavaScript 监听 判断 移动端 滑动事件的更多相关文章
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- js滚动监听
下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 ? 1 2 3 4 5 6 7 8 window.onscroll = function () { var t = docum ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Android 手势水平监听判断
package com.zihao.ui; import com.zihao.R; import android.os.Bundle; import android.app.Activity; imp ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- Vue.js:监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- JavaScript监听回车事件
记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...
随机推荐
- MVC 的那点小事
两年未见 一切从头再来.我猜到了故事的开头,找工作一如我想象的那般艰难,但是结果却比我预期的要好很多. 第一次开始用MVC 框架,比我想象的要简单的多,就像同事跟我说的,这只是个框架. 言归正传,前两 ...
- fastjson的常用方法
/** * 解析对象形式的json字符串 */ public static void test1() { String jsonStr = "{\"JACKIE_ZHANG\&qu ...
- 运行msckf_vio
MSCKF_vio是一种基于多状态约束卡尔曼滤波器的双目视觉里程计.其中多状态约束是指将多帧图像的相机位姿加入卡尔曼状态向量中,在进行卡尔曼增益之前通过多帧图像之间的约束进行最小二乘优化来估计特征点 ...
- Task.WaitAll代替WaitHandle.WaitAll
Task.Waitall阻塞了当前线程直到全完.whenall开启个新监控线程去判读括号里的所有线程执行情况并立即返回,等都完成了就退出监控线程并返回监控数据. task.Result会等待异步方法返 ...
- 安装mysql时启动服务出错问题
mysql安装最后一步 无法启动服务错误 博客分类: IDE问题解析 今天安装mysql程序时候,在安装到最后一步时候,在最后一步却发现无法启动服务,出现这样的提示“cannot create ...
- opencv 3.2安装
opencv 3.2安装 下载地址: https://sourceforge.net/projects/opencvlibrary/files/opencv-win/3.2.0/opencv-3.2. ...
- PAT 甲级 1015 Reversible Primes(20)
1015 Reversible Primes(20 分) A reversible prime in any number system is a prime whose "reverse& ...
- vim删除单词
参考资料: https://blog.csdn.net/grey_csdn/article/details/72355735 混迹于Windows.Linux以及Mac,选择加强自己的VIM水平应该不 ...
- virualbox问题
出不来64位虚拟系统 bios设置虚拟化可用 2.创建虚拟机 启动不了 提示 不能打开一个... 安装exten 扩张包 3.设备 -- 安装增强功能... 分辨率 设置成功
- Java的反射技术
什么是反射机制 Java的反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能调用它的任意属性和方法.这种动态获取信息以及动态调用对象属性和方法的即使称为J ...