Найти элементный палец включен во время события touchhend

Мне нужно выяснить, какой элемент html находился под пальцем, когда вызывается событие touchhend. Код, который я использую;

$('.wsSquare').on("mouseup touchend",function(event){
    event.preventDefault();
    event.stopPropagation();
    console.log($(event.target).data());    
});

Используя мышь на устройстве (без касания), этот код правильно регистрирует данные, связанные с элементом под мышью во время события mouseup.

Однако на сенсорном устройстве (ipad safari) event.target - это элемент, который находился под пальцем во время события touchstart и регистрирует данные элемента под событием touchstart

Я также рассмотрел поведение события touchmove, это также имеет такое же поведение (event.target - элемент touchstart). Кажется, что цель для всех событий касания - это элемент, затронутый в начале жеста.

Мне нужно получить доступ к элементу под пальцем, когда вызывается событие touchhend. Мой жест потенциально пересекает многие элементы.

Изменить

Дальнейшие исследования выкопали это из спецификацию.

5.5 Событие touchhend

Пользовательский агент должен отправить этот тип события, чтобы указать, когда пользователь удаляет точку касания с сенсорной поверхности, также включая случаи, когда сенсорная точка физически покидает сенсорную поверхность, например, отталкивается от экрана.

Цель этого события должна быть тем же Элементом, на котором точка касания начиналась, когда она была впервые помещена на поверхность, даже если точка касания с тех пор перемещена за пределы интерактивной области целевого элемента.

Точка касания или удаленные точки должны быть включены в атрибут changedTouches для TouchEvent и не должны включаться в атрибуты touch и targetTouches.

Итак, наблюдаемое поведение является правильным, как я могу изменить это поведение?

Ответ 1

Используйте document.elementFromPoint и передайте ему координаты из событий, например:

$('.wsSquare').on("mouseup touchend",function(event){
    event.preventDefault();
    event.stopPropagation();
    var changedTouch = event.changedTouches[0];
    var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
    // Do something with elem
});