移动端触摸滑动原理详解案例，实现过程通过添加DOM标签的触摸事件监听，并计算触摸距离，通过距离坐标计算触摸角度，最后通过触摸角度去判断往哪个方向触摸的。

触摸的事件列表

触摸的4个事件：

touchstart      触摸屏幕上时触发

touchmove    触摸屏幕中滑动时触发

touchend       离开屏幕时触发

touchcancel    系统取消触摸事件的时候触发

监听触摸后触摸事件会实现一个event对象，这个对象里面包括3个触摸函数列表。

触摸事件里的3个函数：

touches      屏幕上所有手指列表

targetTouches      在当前DOM标签上手指的列表

changedTouches      涉及当前事件的手指的列表

触摸函数的属性，用于获取坐标

8个属性：

clientX      触摸目标在浏览器中的x坐标

clientY      触摸目标在浏览器中的y坐标

identifier      标识触摸的唯一ID。

pageX      触摸目标在当前DOM中的x坐标

pageY      触摸目标在当前DOM中的y坐标

screenX      触摸目标在屏幕中的x坐标

screenY      触摸目标在屏幕中的y坐标

target      触摸的DOM节点目标。

Math.atan2()函数，计算角度的弧度值

angel=Math.atan2(y,x)

x 指定点的 x 坐标

y 指定点的 y 坐标

angel是一个弧度值（可以比喻为直角三角形对角的角，其中 x 是邻边边长，而 y 是对边边长）

atan2(x,y)*180/Math.PI   转换为角度

触摸详细代码：

<html>

<head>

    <meta charset="utf-8"/>

    <title>touch test</title>

</head>

<body>

<div id="box" style="width:100%;height:100%;border:1px solid red;"></div>

<script>

    //定义变量，用于记录坐标和角度

    var startx,starty,movex,movey,endx,endy,nx,ny,angle;

    //开始触摸函数，event为触摸对象

    function touchs(event){

            //阻止浏览器默认滚动事件

        event.preventDefault();

        //获取DOM标签

        var box = document.getElementById('box');

        //通过if语句判断event.type执行了哪个触摸事件

        if(event.type=="touchstart"){

             console.log('开始');

             //获取开始的位置数组的第一个触摸位置

            var touch = event.touches[0];

             //获取第一个坐标的X轴

            startx = Math.floor(touch.pageX);

            //获取第一个坐标的X轴

            starty = Math.floor(touch.pageY);

            //触摸中的坐标获取

        }else if(event.type=="touchmove"){

             console.log('滑动中');

            var touch = event.touches[0];

            movex = Math.floor(touch.pageX);

            movey = Math.floor(touch.pageY);

            //当手指离开屏幕或系统取消触摸事件的时候

        }else if(event.type == "touchend" || event.type == "touchcancel"){

                //获取最后的坐标位置

            endx = Math.floor(event.changedTouches[0].pageX);

            endy = Math.floor(event.changedTouches[0].pageY);

             console.log('结束');

             //获取开始位置和离开位置的距离

            nx = endx-startx;

            ny = endy-starty;

            //通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI

            angle = Math.atan2(ny, nx) * 180 / Math.PI;

            if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){

                return false;

                console.log('滑动距离太小');

            }

            //通过滑动的角度判断触摸的方向

            if(angle<45 && angle>=-45){

                alert('右滑动');

                return false;

            }else if(angle<135 && angle>=45){

                alert('下滑动');

                return false;

            }else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){

                alert('左滑动');

                return false;

            }else if(angle<=-45 && angle >=-135){

                alert('上滑动');

                return false;

            }

        }

    }

    //添加触摸事件的监听，并直行自定义触摸函数

    box.addEventListener('touchstart',touchs,false);

    box.addEventListener('touchmove',touchs,false);

    box.addEventListener('touchend',touchs,false);

</script>

</body>

</html>

移动端js触摸touch详解（附带案例源码）的更多相关文章

  1. Android事件传递机制详解及最新源码分析——ViewGroup篇

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...

  2. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  3. 《Android NFC 开发实战详解 》简介+源码+样章+勘误ING

    <Android NFC 开发实战详解>简介+源码+样章+勘误ING SkySeraph Mar. 14th  2014 Email:skyseraph00@163.com 更多精彩请直接 ...

  4. 【详解】ThreadPoolExecutor源码阅读（三）

    系列目录 [详解]ThreadPoolExecutor源码阅读(一) [详解]ThreadPoolExecutor源码阅读(二) [详解]ThreadPoolExecutor源码阅读(三) 线程数量的 ...

  5. 【详解】ThreadPoolExecutor源码阅读（二）

    系列目录 [详解]ThreadPoolExecutor源码阅读(一) [详解]ThreadPoolExecutor源码阅读(二) [详解]ThreadPoolExecutor源码阅读(三) AQS在W ...

  6. 【详解】ThreadPoolExecutor源码阅读（一）

    系列目录 [详解]ThreadPoolExecutor源码阅读(一) [详解]ThreadPoolExecutor源码阅读(二) [详解]ThreadPoolExecutor源码阅读(三) 工作原理简 ...

  7. SpringBoot Profile使用详解及配置源码解析

    在实践的过程中我们经常会遇到不同的环境需要不同配置文件的情况,如果每换一个环境重新修改配置文件或重新打包一次会比较麻烦,Spring Boot为此提供了Profile配置来解决此问题. Profile ...

  8. android WebView详解，常见漏洞详解和安全源码

    这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以及针对该源码的解析.  转载请注明出处:http://blog.csdn.net/se ...

  9. Android 网络框架之Retrofit2使用详解及从源码中解析原理

    就目前来说Retrofit2使用的已相当的广泛,那么我们先来了解下两个问题: 1 . 什么是Retrofit? Retrofit是针对于Android/Java的.基于okHttp的.一种轻量级且安全 ...

随机推荐

  1. DOS命令行操作MySQL常用命令

    平时用可视化界面用惯了,如果紧急排查问题,没有安装可视化工具的话,只能通过命令来看了. 以备不时之需,我们要熟悉一下命令行操作MySQL. 打开DOS命令窗口:WIN + R 输入cmd,回车 然后输 ...

  2. AllowsTransparency="True" 怎么放大缩小窗体

    后台都不用写任何代码! xaml: <Window x:Class="TestNoBorderWindow"         xmlns="http://schem ...

  3. Python爬取知乎上搞笑视频，一顿爆笑送给大家

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Huangwei AI 来源:Python与机器学习之路 PS:如有需 ...

  4. Java生鲜电商平台-深入订单拆单架构与实战

    Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求,细思极恐,思考越深入,就会发现里面涉及的东西越来越多,要想做好订单拆单的功能,还是相当有难度, 因此总结了一下拆单功能细 ...

  5. 敏捷软件开发_实例1<二>

    敏捷软件开发_实例1 这本书的实例非常好,给了我非常多的启发.主要讲了两个实例,咖啡机和薪水支付实例,咖啡机实例比较简单并没有用什么设计模式,薪水支付实例用了很多设计模式,包括后面的打包等. 咖啡机实 ...

  6. JS基本语法---while循环---练习

    JS基本语法---while循环---练习 练习1: 求6的阶乘 var ji = 1;//存储最终的阶乘的结果 var i = 1;//开始的数字 while (i <= 6) { ji *= ...

  7. 实战FFmpeg－－编译iOS平台使用的FFmpeg库（支持arm64的FFmpeg2.6.2）

    编译环境:Mac OS X 10.10.2 ,Xcode 6.3  iOS SDK 8.3        FFmpeg库的下载地址是 http://www.ffmpeg.org/releases/ . ...

  8. [b0028] python 归纳 (十三)_队列Queue在多线程中使用

    # -*- coding: UTF-8 -*- """ 多线程同时读队列 总结: 1. 会阻塞 if self._jobq.qsize() > 0 进入逻辑,此时被 ...

  9. [20190531]ORA-600 kokasgi1故障模拟与恢复(后续).txt

    [20190531]ORA-600 kokasgi1故障模拟与恢复(后续).txt --//http://blog.itpub.net/267265/viewspace-2646340/=>[2 ...

  10. Jmeter之命令行生成HTML报告

    其实每次使用jemter.bat文件启动JMeter时,命令行窗口都会提示我们不要使用GUI窗口进行测试,除非是进行调试脚本 使用命令行生成结果也很测试报告也很简单 jmeter -n -t [jmx ...