<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 监听 判断 移动端 滑动事件的更多相关文章

  1. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  2. js滚动监听

    下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 ? 1 2 3 4 5 6 7 8 window.onscroll = function () {  var t = docum ...

  3. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  4. Android 手势水平监听判断

    package com.zihao.ui; import com.zihao.R; import android.os.Bundle; import android.app.Activity; imp ...

  5. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  6. js监听用户的键盘敲击事件,兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  7. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  8. Vue.js:监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  9. JavaScript监听回车事件

    记录一下,兼容性也考虑到了,原文地址:JavaScript 监听回车事件 JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(ev ...

随机推荐

  1. swift - 加速器/摇一摇功能

    import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoa ...

  2. sqlite c#

    https://www.cnblogs.com/icebutterfly/p/7850689.html https://www.cnblogs.com/sdadx/p/7127098.html

  3. tiny4412 启动方式

    1.iROM(BL0):是指Exynos4412的iROM中固化的启动代码,其作用是初始化系统时钟,设置看门狗,初始化堆和栈,加载8kb的bl1到Exynos4412的一个64kb大小内部sram(I ...

  4. Java中的forin语句

    forin的原理 forin语句是JDK5版本的新特性,在此之前,遍历数组或集合的方法有两种:通过下标遍历和通过迭代器遍历.先举个例子: @Test public void demo() { Stri ...

  5. Loadrunner使用键盘快捷键

    ---------Loadrunner使用键盘快捷键------------ alt+f8 比较当前快照(仅限于 Web Vuser) alt+ins 新建步骤 ctrl+a 全选 ctrl+c 复制 ...

  6. BZOJ1228或洛谷2148 [SDOI2009]E&D

    BZOJ原题链接 洛谷原题链接 完全不会呀.. 写了这题才知道\(SG\)函数原来也能打表找规律... 题解请看大佬的博客 #include<cstdio> using namespace ...

  7. Scrapy-Redis分布式策略

    Scrapy-Redis分布式策略 原理图: 假设有四台电脑:Windows 10.Mac OS X.Ubuntu 16.04.CentOS 7.2,任意一台电脑都可以作为 Master端 或 Sla ...

  8. UI设计教程分享:让你彻底读懂字体

    一份普普通通.规规矩矩的设计 一份让人印象深刻.新颖有趣的设计 差在哪?其实就差在三个字上! “优秀的设计不是每一个细节都有亮点,而是弱化其他元素,让某一个亮点最大化.” 今天“骉叔的设计心得”就来总 ...

  9. swift 总结

    结构体(struct)属于值类型, 当值类型的实例被声明为常量的时候,它的所有属性也就成了常量. 属于引用类型的类(class)则不一样.把一个引用类型的实例赋给一个常量后,仍然可以修改该实例的变量属 ...

  10. [AI]神经网络章3 损失函数

    损失函数 作用 在有监督的学习中,需要衡量神经网络输出和所预期的输出之间的差异大小.这种误差函数需要能够反映出当前网络输出和实际结果之间一种量化之后的不一致程度,也就是说函数值越大,反映出模型预测的结 ...