javascript - ejemplos - title html

El dedo del elemento de búsqueda está activado durante un evento de toque

Question

Necesito descubrir qué elemento html estaba debajo del dedo cuando se llama al evento de touchend. El código que estoy usando;

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

Al usar el mouse en un dispositivo (no táctil), este código registra correctamente los datos asociados con el elemento debajo del mouse en el momento del evento mouseup.

Sin embargo, en un dispositivo táctil (ipad safari), event.target es el elemento que estaba debajo del dedo durante el evento de inicio táctil y registra los datos del elemento bajo el evento de inicio táctil.

También he examinado el comportamiento del evento touchmove, esto también tiene el mismo comportamiento (el event.target es el elemento touchstart). Parece que el objetivo de todos los eventos táctiles es el elemento que se toca al principio del gesto.

Necesito acceder al elemento debajo del dedo cuando se llama al evento de toque. Mi gesto potencialmente atraviesa muchos elementos.

Editar

Otras investigaciones extrajeron esto de la especificación .

5.5 El evento de toque.

Un agente de usuario debe enviar este tipo de evento para indicar cuándo el usuario elimina un punto de contacto de la superficie táctil, también incluye los casos en que el punto de contacto abandona físicamente la superficie táctil, como cuando se arrastra fuera de la pantalla.

El objetivo de este evento debe ser el mismo Elemento en el que comenzó el punto de contacto cuando se colocó por primera vez en la superficie, incluso si el punto de contacto se ha movido fuera del área interactiva del elemento de destino .

El punto de contacto o los puntos que se eliminaron deben incluirse en el atributo changedTouches del TouchEvent, y no deben incluirse en los atributos de touch y targetTouches.

Entonces, el comportamiento observado es correcto, ¿cómo puedo cambiar este comportamiento?

Answer 1

Use document.elementFromPoint y aliméntelo con las coordenadas de los eventos, por ejemplo, como esto:

$(''.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
});