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 ...
随机推荐
- Java面试基础知识(2)
1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.说说& ...
- linux下安装以及升级npm,node的方法
1.最开始使用阿里云文档提供的安装方法一直都是失败的状态,后来找到了新的方法重新安装,按照以下操作一步一步的走即可实现,亲测可用 2.安装完之后,会发现npm和node的版本都偏低,需要重新升级以下, ...
- 1.maven安装配置
这段时间在做项目构建管理方面的工作,以前很多项目都是通过ant去构建的,虽然很早就接触过mavan,但是从没有系统的去学习过, 现在项目需要用maven来构建,我结合自己的心得整理一下放在博客上作为自 ...
- Linux yum源完全配置
一.简介 yum主要功能是更方便的添加/删除/更新RPM包,自动解决包的依赖性问题,便于管理大量系统的更新问题,其理念是使用一个中心仓库(repository)管理一部分甚至一个distributio ...
- jQuery Dom对象操作 增、删、改、复制、包裹
1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...
- hdu 1541 (基本树状数组) Stars
题目http://acm.hdu.edu.cn/showproblem.php?pid=1541 n个星星的坐标,问在某个点左边(横坐标和纵坐标不大于该点)的点的个数有多少个,输出n行,每行有一个数字 ...
- Delphi XE2有什么新功能
具体内容见PDF Delphi XE2有什么新功能Delphi XE2提供(offers)了令人兴奋(exciting)的新功能,让您能够建立高度可视化的,在Windows,Mac和iOS上的业务应用 ...
- Java中 i++ 是线程安全的么?为什么?
问题 在 int i = 0; i = i++; 语句中,i = i++是线程安全的么?如果不安全,请说明上面操作在JVM中的执行过程,为什么不安全?说出JDK中哪个类能达到以上的效果,并且是线程安全 ...
- List<? extends T>和List<? super T>之间有什么区别?
List<? extends T>表示类型的上界为T,即参数化的类型可能是T也可能是T的子类.<? extends T>被设计用来读数据的泛型,只能读取类型为T的元素. Lis ...
- UD系统主定制界面