移动端js触摸touch详解（附带案例源码）

移动端触摸滑动原理详解案例，实现过程通过添加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.PIangle = 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>

转载于:https://www.cnblogs.com/lguow/p/11151594.html

移动端js触摸touch详解（附带案例源码）相关推荐

用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 飞机大战前面几期用ca ...
AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）
AR.js开发问题详解(二维码识别不出来及AR二维码如何进行训练) 1. 大家碰到的很多都是二维码识别不出来的情况. 原因:周围环境的光太强或太暗,遮挡了二维码的信息,摄像头识别不到全部的信 ...
aes js加密php解密实例,基于PHP和JS的AES相互加密解密方法详解(CryptoJS)_PHP_JS_AES源码...
[实例简介] 基于PHP和JS的AES相互加密解密方法详解(CryptoJS)_PHP_JS_AES源码 [实例截图] [核心代码] 基于PHP和JS的AES相互加密解密方法详解(CryptoJS)_ ...
android WebView详解，常见漏洞详解和安全源码（下）
上篇博客主要分析了 WebView 的详细使用,这篇来分析 WebView 的常见漏洞和使用的坑. 上篇:android WebView详解,常见漏洞详解和安全源码(上) 转载请注明出处:http ...
android WebView详解，常见漏洞详解和安全源码（上）
这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以及针对该源码的解析. 由于博客内容长度,这次将分为上下两篇,上篇详解 WebView ...
FPGA学习之路—接口（3）—SPI详解及Verilog源码分析
FPGA学习之路--SPI详解及Verilog源码分析概述 SPI = Serial Peripheral Interface,是串行外围设备接口,是一种高速,全双工,同步的通信总线. 优点支持全 ...
faster rcnn fpn_Faster-RCNN详解和torchvision源码解读（三）：特征提取
我们使用ResNet-50-FPN提取特征 model = torchvision.models.detection.fasterrcnn_resnet50_fpn(pretrained=True) ...
【Python】基金/股票最大回撤率计算与绘图详解（附源码和数据）
如果你想找的是求最大回撤的算法,请跳转:[Python] 使用动态规划求解最大回撤详解 [Python]基金/股票最大回撤率计算与绘图详解(附源码和数据) 0. 起因 1. 大成沪深300指数A 5 ...
生成对抗网络入门详解及TensorFlow源码实现--深度学习笔记
生成对抗网络入门详解及TensorFlow源码实现–深度学习笔记一.生成对抗网络(GANs) 生成对抗网络是一种生成模型(Generative Model),其背后最基本的思想就是从训练库里获取很多 ...

移动端js触摸touch详解（附带案例源码）

移动端js触摸touch详解（附带案例源码）相关推荐

最新文章

热门文章