Извлекать то же самое смещение X при касании, как событие мыши

Ответ 1

Я использую этот

var rect = e.target.getBoundingClientRect();
var x = e.targetTouches[0].pageX - rect.left;
var y = e.targetTouches[0].pageY - rect.top;

Ответ 2

Вы должны использовать свойства clientX/clientY события мыши (или pageX/pageY), если у вас есть прокрутка на вашей странице.

Что касается вашего решения. Его можно исправить, используя getElementById(canvasName).clientX

ev.offsetX = ev.targetTouches[0].pageX - getElementById(canvasName).clientX

canvasName.offsetLeft является смещением canvasName по отношению к нему родительским. Поэтому, если вы хотите использовать offsetLeft, вы должны сделать что-то вроде следующего

var left = 0,
elem = getElementById(canvasName);

while(elem) {
  left = left + parseInt(elem.offsetLeft);
  elem = elem.offsetParent;         
}

ev.offsetX = ev.targetTouches[0].pageX - left

Ответ 3

Я знаю, что это старый вопрос, но первый в google "событие offsetX touch". Я закончил эту функцию после исследования, которое я сделал.

function normalizePosition(evt, parent){ // Simple adoptation
var position = {};

position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX;
position.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;
}

function normalizePosition(evt, parent, gridSize, offset){ // With some extra stuffs
var position = {};

position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX;
position.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;
}

if(gridSize){
    position.x = Math.floor(position.x / gridSize);
    position.y = Math.floor(position.y / gridSize);
}


if(offset){
    position.x -= offset.x;
    position.y -= offset.y;
}

return position;
}

Ответ 4

Если вы используете события касания jQuery, атрибуты layerX и layerY предоставляют относительные x и y, но не принимают во внимание преобразование. Поэтому я вручную применил преобразование, взяв значения масштаба преобразования из CSS.

e = событие касания из jQuery

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;

Чтобы сделать последние две строки совместимыми с событиями касания и нажатия:

const offsetX = e.offsetX || layerX * currentScaleX;
const offsetY = e.offsetY || layerY * currentScaleY;

Ссылка для захвата значений преобразования: Получить значение css преобразования напрямую, используя jquery

Если вы используете Reactjs onClick, то вы можете получить значение 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;

Примечание. Лучше хранить значения преобразования в Redux, а не захватывать их с помощью jQuery.

Ответ 5

Кредиты для fooobar.com/info/11599/...

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];
}