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

  1. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

  2. Android开发之手势滑动（滑动手势监听）详解

    Android开发之手势滑动(滑动手势监听)详解 在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListen ...

  3. WebView使用详解（二）——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

  4. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  5. jquery mobile 对手势触控提供了如下几个事件监听:

    jquery mobile 对手势触控提供了如下几个事件监听: 复制代码代码如下: tap  当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动 ...

  6. 前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  7. Netty事件监听和处理（下）

    上一篇 介绍了事件监听.责任链模型.socket接口和IO模型.线程模型等基本概念,以及Netty的整体结构,这篇就来说下Netty三大核心模块之一:事件监听和处理. 前面提到,Netty是一个NIO ...

  8. jquery 事件监听方法

    一.事件监听方法 mouseover()   鼠标移入事件方法 mouseout()    鼠标移出事件方法 mouseenter()  鼠标移入事件方法 mouseleave()  鼠标移出事件方法 ...

  9. Zookeeper Curator 事件监听 - 秒懂

    目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...

随机推荐

  1. 你还在用BeanUtils进行对象属性拷贝？

    在做业务的时候,为了隔离变化,我们会将DAO查询出来的DO和对前端提供的DTO隔离开来.大概90%的时候,它们的结构都是类似的:但是我们很不喜欢写很多冗长的b.setF1(a.getF1())这样的代 ...

  2. python基础-元组(tuple)及内置方法

    元组-tuple 用途:用于存储多个不同类型的值,但是不能存储可变类型数据 定义方法:用小括号存储数据,数据与数据之间通过逗号分隔,元组中的值不能改变. 注意: 1.定义元组时,如果里面只有一个值,在 ...

  3. PyQt图形化布局

    安装PyQt第三方库 pip install PyQt5 安装Qt Designer(Qt的布局工具) pip install PyQt5-tools PyChram设置Qt工具 配置Qt Desig ...

  4. P5304旅行者（比bk201还要流氓的解法）

    题目如上. 暴力碾标算,n^2过百万!! 作为一道黑题它确实有点点水(如果是畜生解法的话) 就是找出两两点之间的最短路的最小值. 本来是很高深的一题,要跑两遍最短路啊,然后染色啊,再拓展什么的,但是! ...

  5. Spring Boot 2.X(十六)：应用监控之 Spring Boot Actuator 使用及配置

    Actuator 简介 Actuator 是 Spring Boot 提供的对应用系统的自省和监控功能.通过 Actuator,可以使用数据化的指标去度量应用的运行情况,比如查看服务器的磁盘.内存.C ...

  6. 『题解』洛谷P1314 聪明的质监员

    更好的阅读体验 Portal Portal1: Luogu Portal2: LibreOJ Portal3: Vijos Description 小T是一名质量监督员,最近负责检验一批矿产的质量.这 ...

  7. [干货]AspNetCore熟练应用CancellationToken，CTO会对你刮目相看

    背景 已经有很多文章记录了 web程序中采用异步编程的优势和.Net异步编程的用法, 异步编程虽然不能解决查询数据库的瓶颈, 但是利用线程切换,能最大限度的弹性利用工作线程, 提高了web服务的响应能 ...

  8. 使用 Zephir 轻松构建 PHP 扩展

    简介: 通过 PHP 扩展, 我们可以在 php 代码中使用一些特定的方法(大部分的 php 扩展都是用 C 写的). 比如,在 PHP 中需要与 SQLite3 交互,我们可以自己写方法与之进行连接 ...

  9. [RAM] FPGA的学习笔记——RAM

    1.RAM——随机存取存储器, 分为SRAM和DRAM. SRAM:存和取得速度快,操作简单.然而,成本高,很难做到很大.FPGA的片内存储器,就是一种SRAM,用来存放程序,以及程序执行过程中,产生 ...

  10. [ISE调试] 在ISE调试过程中，遇到过的warning以及消除办法

    1.在generate的过程中,在Map环节遇到了下面这个warning 意思:告诉你是黑盒子,而且他本来在设计里面就是黑盒子. 解决办法:点击图中的,会弹出一个代码文件,是声明这个IP核的文件,代码 ...