javascript - 获取js点击点相对被点击元素的位置，click与touch的区别

问题描述

问 题

js中，获取鼠标（点击）或手势(触摸)点相对于被点击元素的所在x,y位置问题

click

dom.addEventListener('mousedown',function(e){
    console.log(e.layerX,e.layerY);
});

可以正常获取

touch

dom.addEventListener('touchstart',function(e){
    console.log(e.touches[0]);
});
//没有对应的值

该如何获取touch点相对被点击元素的位置呢？

说明一下：
clientX是相对屏幕的位置，不是被点击元素的位置：
click.clientX:https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/clientX
touch.clientX:https://developer.mozilla.org/zh-CN/docs/Web/API/Touch/clientX
pageX 相对于整个html文档的坐标https://developer.mozilla.org/zh-CN/docs/Web/API/Touch/pageX

解决方案

直接使用event.clientX是不起作用的，要使用event.changedTouches[0].clientX才好,

如果是jQuery的event对象，使用event.originalEvent.changedTouches[0].clientX。

这篇关于javascript - 获取js点击点相对被点击元素的位置，click与touch的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！