Trouver l'élément le doigt sur lors d'un événement touchend

J'ai besoin de découvrir quel élément html a été sous le doigt lorsque le touchend événement est appelé. Le code j'utilise;

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

À l'aide de la souris sur l'une des (non tactile) de l'appareil, ce code correctement les journaux les données associées à l'élément de la souris au moment de l'événement mouseup.

Cependant sur un périphérique tactile (ipad safari), de l'événement.la cible est l'élément qui a été sous le doigt pendant les évènements touchstart événement et enregistre les données de l'élément les évènements touchstart événement

J'ai également étudié le comportement de l'touchmove cas, cela a aussi le même comportement (l'événement.la cible est d'évènements touchstart élément). Il semble que la cible de tous les événements tactiles est l'élément touché au début de la geste.

J'ai besoin d'accéder à l'élément sous le doigt lorsque le touchend événement est appelé. Mon geste potentiellement traverse de nombreux éléments.

Modifier

D'autres recherches dégoté cette de la spécification.

5.5 Le touchend événement

Un agent utilisateur doit poster ce type d'événement pour indiquer lorsque l'utilisateur supprime un point de contact de la surface tactile, aussi, y compris les cas où le point de contact physiquement les feuilles de la surface tactile, comme le fait d'être traîné hors de l'écran.

L'objectif de cet événement doit être le même Élément sur lequel le point de contact a commencé quand il a d'abord été placé sur la surface, même si le point de contact a depuis déménagé à l'extérieur de la zone interactive de l'élément cible,.

Le point de contact ou des points qui ont été retirés doivent être inclus dans le changedTouches attribut de la TouchEvent, et ne doit pas être inclus dans la touche et targetTouches attributs.

Si le comportement observé est correct, comment puis-je changer ce comportement?

InformationsquelleAutor Ken | 2012-07-17
  1. 26

    Utilisation document.elementFromPoint et nourrir les coordonnées de l'ensemble des événements, par exemple, comme ceci:

    $('.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
});
    • Je pense que le TouchEvent lui-même n'a pas de coordonnées, mais le .changedTouches.item(0) devrait avoir pageX/Y.
    • Autant que je l'ai utilisé TouchEvents, ça dépend de l'appareil et navigateur utilisé plus. Mais que ce lien devrait aider les OP à trouver ce qui fonctionne pour lui. Aussi, ceci
    • Cela a jeté une erreur où les événements de souris ont été impliqués. Une meilleure approche serait probablement pour l'utiliser comme ceci: var quit = e.changedTouches; et de vérifier ensuite si elle n'est pas une falsy avant d'appliquer la ligne suivante. if (quit) var elem = document.elementFromPoint(quit[0].clientX, quit[0].clientY);. J'ai utilisé différentes variables pour des raisons de lisibilité.
    • J'aurais upvoted parce qu'il a été par ailleurs très utile. Mais ça ne fonctionne pas: démo.
    InformationsquelleAutor Some Guy