javascript 像鼠标事件一样在触摸时检索相同的 offsetX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17130940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
retrieve the same offsetX on touch like mouse event
提问by Lamia Mehreen
Hello I am trying to get the offsetX,Y of touch event which should be identical to offsetX of mouse event. To do so I have used this code:
您好，我正在尝试获取触摸事件的 offsetX,Y，它应该与鼠标事件的 offsetX 相同。为此，我使用了以下代码：
ev.offsetX = ev.targetTouches[0].pageX- canvasName.offsetLeft
I have even tried to simulate the touch event into mouse event but for that purpose i need the offsetX/Y, which is unavailable in touch event. Is there any way offsetX/Y can be calculated for touch? Please help
我什至尝试将触摸事件模拟为鼠标事件，但为此我需要 offsetX/Y，这在触摸事件中不可用。有没有办法为触摸计算offsetX/Y？请帮忙
回答by Alex Nikulin
I use this
我用这个
var rect = e.target.getBoundingClientRect();
var x = e.targetTouches[0].pageX - rect.left;
var y = e.targetTouches[0].pageY - rect.top;
回答by justFatLard
I know this is an old question but the first in a google of "offsetX touch event".. I ended up using something like this after the research I did.
我知道这是一个老问题，但在“offsetX 触摸事件”的 google 中是第一个。经过研究，我最终使用了类似的东西。
function getOffsetPosition(evt, parent){
var position = {
x: (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX,
y: (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY
};
while(parent.offsetParent){
position.x -= parent.offsetLeft - parent.scrollLeft;
position.y -= parent.offsetTop - parent.scrollTop;
parent = parent.offsetParent;
}
return position;
}
回答by jfbloom22
If you are using jQuery touchend events, the layerX and layerY attributes provide the relative x and y, but do not take into account the transform. So I manually applied the transform by grabbing the transform scale values from the css.
如果您使用 jQuery touchend 事件，则 layerX 和 layerY 属性提供相对的 x 和 y，但不考虑转换。因此，我通过从 css 中获取变换比例值来手动应用变换。
e = the touchend event from jQuery
e = 来自 jQuery 的 touchend 事件
parent = the jQuery object of the parent element where the "transform" is applied. For me it was $(e.target.parentNode);
parent = 应用“转换”的父元素的 jQuery 对象。对我来说是$(e.target.parentNode);
const layerX = e.originalEvent.layerX;
const layerY = e.originalEvent.layerY;
const currentScale = 1 / parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]);
const offsetX = layerX * currentScale;
const offsetY = layerY * currentScale;
To make the last two lines compatible with touch and click events:
使最后两行与触摸和点击事件兼容：
const offsetX = e.offsetX || layerX * currentScaleX;
const offsetY = e.offsetY || layerY * currentScaleY;
Reference for grabbing transform values: Fetch the css value of transform directly using jquery
抓取变换值参考：使用jquery直接获取transform 的css值
If you are using Reactjs onClickthen you can get the layerX and layerY values with: e.nativeEvent.layerX. For some reason the layerX and layerY are not available on the React touch events. If you do need to use the React onTouchEnd:
如果你正在使用ReactjsonClick那么你就可以得到layerX和layerY值：e.nativeEvent.layerX。由于某种原因，layerX 和 layerY 在 React 触摸事件中不可用。如果您确实需要使用 React onTouchEnd：
const rect = e.nativeEvent.target.getBoundingClientRect();
const layerX = e.changedTouches[0].clientX - rect.left;
const layerY = e.changedTouches[0].clientY - rect.top;
const currentScale = 1 / parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]);
const offsetX = layerX * currentScale;
const offsetY = layerY * currentScale;
Note: It is better to store the values of the transform in Redux rather than grabbing them with jQuery.
注意：最好将转换的值存储在 Redux 中，而不是使用 jQuery 获取它们。
回答by dersimn
Credits to https://stackoverflow.com/a/11396681/1997890
归功于https://stackoverflow.com/a/11396681/1997890
function recoverOffsetValues(e) {
var rect = e.target.getBoundingClientRect();
var bodyRect = document.body.getBoundingClientRect();
var x = e.originalEvent.changedTouches[0].pageX - (rect.left - bodyRect.left);
var y = e.originalEvent.changedTouches[0].pageY - (rect.top - bodyRect.top);
return [x, y];
}
回答by rejnok
The best answer here don't work for me, on webpage with scrolling! This will work better:
在滚动的网页上，这里的最佳答案对我不起作用！这会更好地工作：
var bcr = e.target.getBoundingClientRect();
var x = e.targetTouches[0].clientX - bcr.x;
var y = e.targetTouches[0].clientY - bcr.y;
I used it to solve my problem.
我用它来解决我的问题。
回答by Eugeny89
You should use clientX/clientYproperties of mouse event (or pageX/pageY) if you have scrolling on your page.
如果您在页面上滚动，您应该使用鼠标事件的clientX/clientY属性（或pageX/ pageY）。
As for your solution. It can be corrected by using getElementById(canvasName).clientX
至于你的解决方案。它可以通过使用来纠正getElementById(canvasName).clientX
ev.offsetX = ev.targetTouches[0].pageX - getElementById(canvasName).clientX
canvasName.offsetLeftis offset of canvasNamewith respect to it's parent. So if you want to use offsetLeftyou should do something like the following
canvasName.offsetLeftcanvasName相对于其父级的偏移量。所以如果你想使用offsetLeft你应该做如下的事情
var left = 0,
elem = getElementById(canvasName);
while(elem) {
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent;
}
ev.offsetX = ev.targetTouches[0].pageX - left
