Как захватить косвенные координаты?

Я пытаюсь захватить координату касания в событии touchend, но получаю undefined. Событие touchstart работает хорошо, но одна и та же концепция не работает на touchend. Я построил этот код с mousedown и mouseup и который работает хорошо.

Что мне не хватает?

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.page.x;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.page.x;
});

FIDDLE

Ответы

Ответ 1

Вам нужно сохранить значения на touchmove и прочитать его в touchend.

var lastMove = null;

// Save the touchstart to always have a position
div.addEvent('touchstart', function(event) {
  lastMove = event;
});

// Override with touchmove, which is triggered only on move
div.addEvent('touchmove', function(event) {
  lastMove = event;
});

Ответ 2

Я смотрел на спецификацию, 4 события касания наследуют от объекта touchEvent, который имеет 3 списка атрибутов, содержащих информацию обо всех затрагивает (каждый палец на экране) во время события, каждый список сохраняет касания на основе этих критериев:

changedTouches: Сохраняет касания, которые находятся вне поверхности целевого элемента.

touches: сохраняет все текущие касания.

targetTouch: сохраняет все текущие касания, которые находятся на поверхности целевого элемента.

Событие touchhend сохраняет положение, когда палец был поднят на changedTouches, и ничего не сохраняется в любом из других списков, поэтому, если вам нужно получить к нему доступ, вы должны использовать event.changedTouches[event.changedTouches.length-1], это возвращает сенсорный объект с помощью pageX и pageY атрибуты для координат.
Вся строка будет:

span.innerHTML = event.changedTouches[event.changedTouches.length-1].pageX;

То, что я еще не смог понять, - это отсутствие атрибутов координат в объекте touchEvent, почему вы можете использовать их в событиях touchstart и touchmove, а не с помощью touchhend. Возможно, реализация добавила этот ярлык, или я промахивался.

Ответ 3

Вы должны использовать changedTouches вместо touches в touchend

div.addEvent("touchstart", function (event) {
    event.preventDefault(); // to avoid scrolling
    span.innerHTML = event.pageX;
});
div.addEvent("touchend", function (event) {
    span.innerHTML = event.changedTouches[0].pageX;
});

Ответ 4

touchStart(event) {
  this.startX = event.touches[0].pageX;
},
touchEnd(event) {
  this.endX = event.changedTouches[0].pageX;
},

Ответ 5

Хотя вопрос не запрашивал jQuery, попробуйте этот код, если вам нужна альтернатива jQuery. Работает со всеми последними версиями jQuery.

$(document).on('touchstart', '.className', function (e) {
    console.log(e.originalEvent.touches[0].pageX);
});
$(document).on('touchend', '.className', function (e) {
    console.log(e.originalEvent.changedTouches[0].pageX);
});

Вы можете опционально опустить "originalEvent" и использовать "changedTouches" только для JS script и jQuery/браузеров, которые не поддерживают.