移动端touch滑动事件监听
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript判断手指在移动端上滑动的方向</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
请在移动端，PC上无法查看效果，滑动查看效果<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>
</body>
</html>
文章出自：https://blog.csdn.net/qq_39198420/article/details/76502267；
移动端touch滑动事件监听的更多相关文章
- 原生 JS 实现移动端 Touch 滑动反弹
什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...
- Android开发之手势滑动（滑动手势监听）详解
Android开发之手势滑动(滑动手势监听)详解 在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListen ...
- WebView使用详解（二）——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- jquery mobile 对手势触控提供了如下几个事件监听:
jquery mobile 对手势触控提供了如下几个事件监听: 复制代码代码如下: tap 当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动 ...
- 前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- Netty事件监听和处理（下）
上一篇 介绍了事件监听.责任链模型.socket接口和IO模型.线程模型等基本概念,以及Netty的整体结构,这篇就来说下Netty三大核心模块之一:事件监听和处理. 前面提到,Netty是一个NIO ...
- jquery 事件监听方法
一.事件监听方法 mouseover() 鼠标移入事件方法 mouseout() 鼠标移出事件方法 mouseenter() 鼠标移入事件方法 mouseleave() 鼠标移出事件方法 ...
- Zookeeper Curator 事件监听 - 秒懂
目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...
随机推荐
- 图片瀑布流，so easy！
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...
- 运用wxs制作微信小程序左滑功能和跳转，性能更优越
锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...
- 学习笔记52_mongodb增删改查
使用use db1作为当前数据库 如果没有db1,会自动创建 使用switch db2,当前数据库切换为db2 使用show dbs,显示当前所有数据库 使用show collection ,显示当前 ...
- 等距结点下的Newton插值多项式系数计算(向前差分)
插值多项式的牛顿法 1.为何需要牛顿法? 使用Lagrange插值法不具备继承性.当求好经过\(({x_0},{y_0})-({x_n},{y_n})\)共n+1个点的插值曲线时候,如果再增加一个 ...
- NOIP模拟测试25
这次考试后面心态爆炸了...发现刚了2h的T2是假的之后就扔掉了,草率地打了个骗分 T1只会搜索和m=0 最先做的T3,主要是发现部分分很多,当时第一眼看上去有87分(眼瞎了). 后来想了想,感觉一条 ...
- css实现鼠标悬浮后的提示效果
一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
- 大数据之路day03--java循环的延申与练习（while 、do-while、for）
在今天,我突然被一个很尴尬的问题问到了,问题是这样的:说一下java循环的应用场景. 我想很多人一下子听到这样的问题不知道怎么回答,大部分人会去想有什么循环格式,特点是什么.这些都是错误的,在往后的面 ...
- Java高性能反射工具包ReflectASM
ReflectASM 使用字节码生成的方式实现了更为高效的反射机制.执行时会生成一个存取类来 set/get 字段,访问方法或创建实例.一看到 ASM 就能领悟到 ReflectASM 会用字节码生成 ...
- css3软键盘不盖住输入框的方法
css3软键盘不盖住输入框的方法 弹出软键盘的时候 最外面的容器高度就发生了变化 要减去软键盘高度了<pre>var bodyheight bodyheight = $('body').h ...
- egret编译速度慢解决方法
egret编译速度慢解决方法 直接用增量更新egret run -a 每次改完代码 保存都会自动编译