移动端无法获取event.clientX和event.clientY的解决办法_event.clientx为undefined-程序员宅基地

技术标签: canvas  clientX  JS  移动端开发  event  javascript  

最近在制作一个实现类似于手机的锁屏手势密码效果的页面时,由于需要应用获取canvas中,手指划过的位置,于是遇到了一些小问题。
众所周知,在PC端,我们通常用event.clienX或者event.clientY来获取手指的坐标,可是在移动端,打开开发者模式,调试touch事件时,这一值通过console.log始终返回是undefined。

通过查询,我发现了TouchEvent里面有touches,targetTouches以及changedTouches这几个属性。其中:

touches 是当前屏幕上所有触摸点的列表

targetTouches 是当前DOM上所有触摸点的列表//尽量使用这个代替touches

changedTouches 详细说一说,要分开来解读:对于 touchstart 事件, 这个 TouchList 对象列出在此次事件中新增加的触点。对于 touchmove 事件,列出和上一次事件相比较,发生了变化的触点。对于 touchend ,列出离开触摸平面的触点(这些触点对应已经不接触触摸平面的手指)。对于 touchenter 事件和 touchleave 事件,列出从上一次事件触发到这一次事件触发的过程中,离开或者进入目标 element 的触点。

这里引用segmentfault上一个问题中的回答来解释
假如有两个div,div2绑定了一个touch事件,最初将手指1放在div2,那么会触发事件,此时touches、targetTouches和changedTouches都是一样的,包含手指1。接着,将手指2放在div1,同时将手指3放在div2,此时事件再次触发,touches为3个手指,targetTouches为手指1和手指3(DOM内手指),changedTouches变为了手指3和手指1的位置(新增加的触摸点)。

用一张图片来生动描述就是:
这里写图片描述

这里我觉得这个回答还有待进一步考虑,因为PC的开发者工具,模拟移动端,鼠标就一个,不知道怎么模拟多个手指,也就无从去console.log这多个事件,所以暂时还没想到用什么方法来验证我下面的思考:

我的思考是假如,手指2和3不是同时放下的有一点时间差(比如手指长度不一样),尤其是当手指3先放下,那么已经触发了touchStart事件,是不是changedTouches中就不会存放手指2了。而且退一步来说,就算两个手指真的都同时放下,事件触发点是div2, div1中那个手指真的会被changedTouches计算在内么?如果有大神试过请在评论中帮我解答一下! 拜谢!

当然因为真实项目中,你应用这三个属性时,大部分情况是不会出现需要考虑我如上的情况的业务需求的,毕竟只需要获取事件触发点的手指就行了嘛。

那么回到最初的问题,移动端无法获取event.clientX和event.clientY肿么办!想必看完整篇文章的你,已经有了一定的思路。就如我项目中,做手势密码,那么很简单了,我监听的事件是touchmove。

那么就在touchmove事件的handler中,使用event.changedTouches[0].clientX来获取就行了!!

大功告成,继续做我的手势密码去!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zzxboy1/article/details/65626605

智能推荐

变压器故障诊断(python代码,逻辑回归/SVM/KNN三种方法同时使用,有详细中文注释)_深度学习变压器故障诊断与预测-程序员宅基地

文章浏览阅读1.7k次。读取了两个CSV文件(Overview.csv和CurrentVoltage.csv),将它们转换为DataFrame,并对其中的日期时间列进行了格式转换。:使用matplotlib和seaborn库绘制了多个图表,包括散点图、折线图、计数柱状图和饼图,来可视化不同传感器数据的变化趋势、分布情况等。:导入了所需的数据处理、数据可视化和机器学习相关的库,并进行了matplotlib和seaborn的样式和参数配置。第二个文件打开 (6列特征,最后一列是标签,正常状态为0,故障为1)_深度学习变压器故障诊断与预测

启动react-native项目 npx react-native run-android停止在Loading dependency graph, done.-程序员宅基地

文章浏览阅读2.2k次。最近在写react-native项目,在项目部署过程中,执行npx react-native run-android命令,node会一直停滞在Loading dependency graph, done.上,所以不能及时更新造成这个问题的原因是react-native的默认端口8081被其它进程给占用了解决方法:1:找到8081端口:netstat -aon|findstr ‘8081’2..._npx react-native run-android

React Native之React Navigation导航器_registercomponent-程序员宅基地

文章浏览阅读230次。最近在学习React Native,关于界面跳转这一块,文档上面写的并不清晰,自己也是研究了很久才搞清楚用法,这里记录下。译注:从0.44版本开始,Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator,则需要先npm i facebooka..._registercomponent

vrep的bubbeRob仿真机器人制作教程_bubblerob-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏7次。1. 构造机器人添加bubbleRob的主体。点击 Menu bar --> Add --> Primititive shape --> Sphere,添加一个球体(以下称为bubbleRob)_bubblerob

异步编程学习之路(五)-线程池原理及使用_core threads must have nonzero keep alive times-程序员宅基地

文章浏览阅读832次。本文是异步编程学习之路(五)-线程池原理及使用,若要关注前文,请点击传送门:异步编程学习之路(四)-睡眠、唤醒、让步、合并前文我们详细介绍了线程之间协同合作的方法,在本文中我们将再进一步详细讲解线程池的原理及使用。个人认为,如果想要学好线程池就必须先从ThreadPoolExcetor源码开始讲起,我不建议直接使用Executors来创建一个线程池。至于为什么不建议直接使用的原因,阅读..._core threads must have nonzero keep alive times

openssh升级到9.0_redhat 6.0升级openssh到9.0-程序员宅基地

文章浏览阅读5.3k次,点赞4次,收藏19次。Openssh 升级到9.0p1版本一、环境介绍查看openssh、openssl版本[root@localhost ~]# openssl versionOpenSSL 1.1.1m 14 Dec 2021[root@localhost ~]# ssh -VOpenSSH_8.9p1, OpenSSL 1.1.1i-fips 26 Jan 2017查看linux发行版和内核[root@localhost ~]# cat /et_redhat 6.0升级openssh到9.0

随便推点

oracle判断字段为空时选用别的字段_oracle中使用sql查询时字段为空则赋值默认-程序员宅基地

文章浏览阅读8.2k次。转至:http://www.th7.cn/db/Oracle/201501/86125.shtmloracle 通过 nvl( )函数sql 查询时为 空值 赋默认值oracle 函数介绍之nvl函数声明:nvl(col,val)说明:当col为空时取val作为返回值,当col不为空时取col值。用处:最主要的是格式化数据,比如计算金额时,不想出现空数据,可以使用nvl(JINE,0)来得到0。由..._oracle字段为空取其他值

项目经理带你-零基础学习C++_新手学习笔记VS2010_1 项目3-黑客攻击系统-输入的优化-56.数组的概念和定义_vs2010定义数组-程序员宅基地

文章浏览阅读108次。/*项目经理带你-零基础学习C++_新手学习笔记VS2010_1项目3-黑客攻击系统-输入的优化-56.数组的概念和定义*/#include #include <Windows.h>#include //using namespace std;int main(){float girlFirends[8];girlFirends[5]=1.78;std::co..._vs2010定义数组

随机色生成_el.style.color-程序员宅基地

文章浏览阅读1.4k次。把标题的颜色设置成随机色<h4 v-rainbow>标题随机色</h4>在script写局部自定义指令(如果想要写全局的需要在main.js里面书写)局部 directives:{ 'rainbow':{ bind(el,binding,vnode){ el.style.color = '#' + Math.ra......_el.style.color

matlab对三角波信号进行频谱分析,实验三 用FFT对信号进行频谱分析及MATLAB程序.doc...-程序员宅基地

文章浏览阅读4.2k次,点赞4次,收藏9次。实验三 用FFT对信号进行频谱分析及MATLAB程序实验三 用FFT对信号进行频谱分析一 实验目的1 能够熟练掌握快速离散傅立叶变换的原理及应用FFT进行频谱分析的基本方法;2了解; (3-1)是的连续周期函数。对序列进行N点DFT得到,则是在区间上对的N点等间隔采样,频谱分辨率就是采样间隔。因此序列的傅里叶变换可利用DFT(即FFT)来计算。用FFT对..._三角波频谱

数组中的逆序对-------归并排序应用_22212 14647 27252 22772-程序员宅基地

文章浏览阅读2k次。题目描述: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数P。并将P对1000000007取模的结果输出。 即输出P%1000000007 输入描述: 题目保证输入的数组中没有的相同的数字数据范围:对于%50的数据,size&amp;lt;=10^4对于%75的数据,size&amp;lt;=10^5对于%100的数..._22212 14647 27252 22772

Android列表控件,整理出Android逆向系列学习进阶视频-程序员宅基地

文章浏览阅读966次,点赞17次,收藏10次。/ 返回适配器都说三年是程序员的一个坎,能否晋升或者提高自己的核心竞争力,这几年就十分关键。技术发展的这么快,从哪些方面开始学习,才能达到高级工程师水平,最后进阶到Android架构师/技术专家?我总结了这 5大块;我搜集整理过这几年阿里,以及腾讯,字节跳动,华为,小米等公司的面试题,把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 PDF(实际上比预期多花了不少精力),包含知识脉络 + 分支细节。Java语言与原理;大厂,小厂。Android面试先看你熟不熟悉Java语言。