千寻前端

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

2016-06-16 11:32:18javascript问题

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

网友回答：

  • theWalker theWalker 2016-6-16 11:17 回复:
    已被采纳

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

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

测试