移动端无法获取event.clientX和event.clientY的解决办法

最新推荐文章于 2020-07-23 17:42:53 发布
最新推荐文章于 2020-07-23 17:42:53 发布
阅读量5.8k 收藏 7
点赞数 5
分类专栏： JS 文章标签： canvas javascript event clientX 移动端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzxboy1/article/details/65626605
版权

最近在制作一个实现类似于手机的锁屏手势密码效果的页面时，由于需要应用获取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来获取就行了！！

大功告成，继续做我的手势密码去！

zzxboy1
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
event.clientX和event.clientY
weixin_33935505的博客
05-05 2708
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
event.X和event.clientX的区别分析
09-05
在处理鼠标事件时，我们常常会遇到`event.X`和`event.clientX`这两个属性，它们都是用来获取鼠标位置的，但有微妙的差别。 `event.clientX`属性返回的是鼠标指针在浏览器的可视窗口（客户区域）内的X坐标，不包括...
移动端的clientX
小灯博客
05-06 787
移动端获取clientX
e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY,e.screenX,e.screenY
测试0901-1
01-29 1066
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文档你是如何理解var e=e||window.event的 刚才写博客《ja...
event.clientY坐标显示不正确（IE与360不同）
haibin_hu的专栏
09-11 837
页面顶部加这句了 DIV.style.left=document.body.scrollLeft+event.clientX+10 //这样的在360上坐标显示不正常 DIV.style.top=document.body.scrollTop+event.clientY+10换成一下的就可以了（document.body==>document.documentElemen
手机端--1.手指拖动touchmove，e.touches[0].clientX
w3cgirl-赵娜的播客
11-19 5644
案例： 图片可以随着手指的拖动  而  变动 1.e.touches[0].clientX  手指横坐标 2.  最后所求  ：  nowX, nowY  图片的横纵坐标    nowX =   手指横坐标  -    误差 3.   已知条件：  误差 deltaX = 手指横坐标 -  nowX  (一开始给个初始值)  deltaX   固定   手指初始按下   与  手指移动的过...
关于鼠标事件中的event.clientY, event.pageY
helloworld
06-24 4324
以上两个属性都表示事件发生时鼠标的Y坐标。 1、clientY翻译过来为客户区坐标Y，表示页面可视区域的Y偏移量(不包括工具栏、搜索栏等)，并且与页面滚动无关，滚动后的clientY值不变。 2、pageY翻译为页面坐标Y，与clientY基本类似，唯一区别在于该值与页面滚动有关，具体来说,pageY = clientY + 页面滚动高度。 测试代码如下： C
js window.event对象详尽解析
10-30
4. `clientX` 和 `clientY`: 这两个属性分别返回鼠标在浏览器窗口可视区域（不包括滚动条）内的X和Y坐标，是只读属性，用于获取鼠标位置。 5. `ctrlKey`: 类似于`altKey`，`event.ctrlKey`用于检查`Ctrl`键的状态。...
HTML5 canvas移动端手机刮刮卡代码.zip
07-04
例如，可以使用touch事件的`changedTouches`属性获取所有改变状态的触摸点，而不是依赖`event.clientX`和`event.clientY`。 在“说明.htm”文件中，可能会详细解释代码的使用方法、配置项以及如何自定义刮刮卡的...
javascript 获取鼠标的绝对位置 event
12-12
首先，我们需要理解`event`对象中的两个关键属性，`clientX`和`clientY`。这两个属性分别表示鼠标点击或移动时相对于浏览器窗口左上角的水平和垂直坐标。它们不包括滚动条的影响，也不考虑页面在框架或IFrame中的...
event对象获取方法总结在google浏览器下测试
09-04
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，Event对象的获取方法如下，感兴趣的朋友可以参考下
event.clientX 于event.clientY
飞檐走壁
10-27 142
event.clientX 于event.clientY 的返回值为数值，因此如果要将其重新赋值给其他的div作为其他div的style.top或者style.left属性的话，一定要在event.clientX之后加上“px”. 例如[code="java"] show(event) { document.getElementById("vidname").style.left = ...
火狐里 event.clientX 问题
qq_36666181的博客
09-27 686
ReferenceError: event is not defined   TypeError: window.event is undefined   解决： var e = window.event || arguments.callee.caller.arguments[0] $(objDiv).css("left", e.clientX); $(objDiv).css("t...
event事件对象和clientX,clientY
memedadexixaofeifei的博客
12-09 392
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event事件和clientX,clientY</title> </head> <body> <script ty
Web前端-JavaScript--特效event client
yanghainan0318的博客
04-21 357
event event事件对象的获取有兼容问题: 1.参数接收: 谷歌/火狐/IE9+ 能获取 IE678返回undefined 2.直接获取全局event(不声明参数) ...
jq使用touch事件client值为undefined的解决方法
qq_40128591的博客
09-04 1342
因为他是数组类的，需要定义下标。 $(".tabel").on('touchmove',function(event){ console.log(event); }); 如果直接console.log(event)的话我们看到的clientX和clientY都是undefined 所以我们要写成这样 $(".tabel").on('touchmove',function(event){...
event.y 与 event.clientY在不同浏览器下的异同
husiyuan6的博客
06-22 560
In Chrome,  event.y = event.clientY They are mouse event y location In IE, event.y != event.clientY  event.clinetY is mouse event y location. While event.y is not. In Firefox, There is no event.y
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 8010
鼠标事件（e=e||window.event） event.clientX、event.clientY (相对浏览器窗口) //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY} } clientX与client..
js event-事件对象和clientX,clientY
qq_35187942的博客
01-06 1181
event:事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的时候调用。飞机-黑匣子。 事件对象必须在一个事件调用的函数里面使用才有内容 事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候 兼容： ie/chrome:event是一个内置全局对象 标准下（火狐...
// 鼠标按下事件，开始拖动图片 popupImg.onmousedown = function (event) { isDragging = true; startX = event.clientX; startY = event.clientY; translateX = 0; translateY = 0; }; // 鼠标移动事件，拖动图片 popupImg.onmousemove = function (event) { if (isDragging) { var deltaX = event.clientX - startX; var deltaY = event.clientY - startY; translateX += deltaX; translateY += deltaY; popupImg.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`; startX = event.clientX; startY = event.clientY; } }; // 鼠标松开事件，停止拖动图片 popupImg.onmouseup = function () { isDragging = false; }; // 鼠标离开事件，停止拖动图片 popupImg.onmouseleave = function () { isDragging = false; };我需要根据鼠标选择图片区域，在指定区域中显示放大图像
最新发布
07-14
要实现根据鼠标选择的图片区域，在指定区域中显示放大的图像，您可以修改鼠标事件的处理程序，以实现选择区域并在指定区域中显示放大图像的功能。以下是修改后的代码： ```javascript function showPopup(imageSrc) { var popup = document.createElement("div"); var popupImg = document.createElement("img"); var scale = 1; var isDragging = false; var startX, startY, translateX, translateY; var startX2, startY2, endX, endY; // 用于选择图片区域的坐标 // 设置弹出窗口中的图片 popupImg.src = imageSrc; popupImg.style.transform = `scale(${scale})`; // 设置悬浮窗样式 popup.style.position = "fixed"; popup.style.width = "80%"; popup.style.height = "80%"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 居中弹出窗口... // 鼠标按下事件，开始拖动图片或选择图片区域 popupImg.onmousedown = function (event) { startX = event.clientX; startY = event.clientY; translateX = 0; translateY = 0; // 记录选择图片区域的起始坐标 startX2 = event.clientX - popup.offsetLeft; startY2 = event.clientY - popup.offsetTop; isDragging = true; }; // 鼠标移动事件，拖动图片或选择图片区域 popupImg.onmousemove = function (event) { if (isDragging) { var deltaX = event.clientX - startX; var deltaY = event.clientY - startY; translateX += deltaX; translateY += deltaY; popupImg.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`; startX = event.clientX; startY = event.clientY; } }; // 鼠标松开事件，停止拖动图片或选择图片区域 popupImg.onmouseup = function () { isDragging = false; // 记录选择图片区域的结束坐标 endX = event.clientX - popup.offsetLeft; endY = event.clientY - popup.offsetTop; // 计算选择图片区域的宽度和高度 var width = Math.abs(endX - startX2); var height = Math.abs(endY - startY2); // 创建放大区域的元素，并设置样式 var zoomArea = document.createElement("div"); zoomArea.style.position = "absolute"; zoomArea.style.left = startX2 + "px"; zoomArea.style.top = startY2 + "px"; zoomArea.style.width = width + "px"; zoomArea.style.height = height + "px"; zoomArea.style.border = "1px dashed red"; zoomArea.style.background = "rgba(0, 0, 0, 0.2)"; // 添加放大区域到弹出窗口 popup.appendChild(zoomArea); }; // 鼠标离开事件，停止拖动图片或选择图片区域 popupImg.onmouseleave = function () { isDragging = false; }; // 键盘事件监听器，按下键盘上的Escape键退出放大图片 document.onkeydown = function (event) { if (event.key === "Escape") { popup.style.display = "none"; } }; } ``` 通过添加选择图片区域的功能，您可以在鼠标按下和鼠标松开事件中记录起始坐标和结束坐标，并根据这些坐标创建一个放大区域的元素，将其添加到弹出窗口中。 请尝试使用上述修改后的代码，并确保在调用`showPopup`函数时传递正确的参数。如果问题仍然存在，请提供更多关于问题的详细信息，以便我们能够更好地帮助您解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值