欢迎来到php自学网~
阅读模式:

移动端js触摸touch详解(附带案例源码)

查看:2498  回复:0  类型:  来源:php自学网  标签 javascript

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

最简单详细的触摸原理实例代码详解。


touch demo文件下载:

touch.rar


分享到:
0 0

*有问题之处烦请在评论中指出,非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:2154mysql的四种索引类型   阅读:850shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:561php文件下载防盗链   阅读:2201Mysql在大型网站的应用架构演变   阅读:1043给 centos 7 安装桌面环境   阅读:5531最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:2219解决 nginx 413 request entity too large   阅读:824php 获取当前前后年、月、星期、日、时分秒的时间   阅读:1311centos 7 安装 php-7.1.3   阅读:5610mongodb设置shell开机启动脚本   阅读:526面试的时候回去等通知,等电话的真实意思   阅读:3240霍金24岁博士毕业论文在线预览   阅读:590linux命令中执行php脚本   阅读:839php打印九九加法表   阅读:665centos 7 设置 nginx-1.11.10 开机启动   阅读:1607mongodb设置shell开机启动脚本   阅读:526shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:561php打印九九乘法表   阅读:847面试都会问你为什么你从上一家公司离职的真实意思   阅读:2121mysql的四种索引类型   阅读:850php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:706phpexcel 超简单从数据库一键导出数据到excel教程   阅读:1415纯干货,程序员面试的超实用技巧   阅读:732centos 7 添加 redis 3.2.9 开机启动脚本   阅读:1991phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:3561centos 7 安装 php-7.1.3   阅读:5610centos 7 添加 redis 3.2.9 开机启动脚本   阅读:1991网站性能优化-页面静态缓存   阅读:1170centos7.3安装mongodb3.6   阅读:579给 centos 7 安装桌面环境   阅读:5531php文件下载防盗链   阅读:2201Mysql在大型网站的应用架构演变   阅读:1043面试的时候回去等通知,等电话的真实意思   阅读:3240分享:淘宝技术这十年   阅读:963给php7安装redis扩展库   阅读:1415php设置cookie为HttpOnly防止XSS攻击   阅读:1227最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:2219什么是天使轮?什么是A轮融资?B轮融资?   阅读:543html5 离线缓存的使用   阅读:898移动端js触摸touch详解(附带案例源码)   阅读:2500一步步带你,如何网站架构   阅读:816移动端js触摸touch详解(附带案例源码)   阅读:2500面试的时候回去等通知,等电话的真实意思   阅读:3240php 读取和设置redis的键值   阅读:1726mysql数据库性能的基本优化   阅读:1214栈和堆的区别   阅读:773phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:3561给网站添加一键新浪微博登录的功能   阅读:1746linux时间戳有趣的情人节秒1234567890   阅读:540