web-dev-qa-db-fra.com

Comment capturer les coordonnées tactiles?

J'essaie de capturer la coordonnée tactile sur l'événement touchend mais je ne suis pas défini. L'événement touchstart fonctionne bien, mais le même concept échoue avec touchend. J'ai construit ce code avec mousedown et mouseup et que fonctionne bien.

Qu'est-ce que je rate?

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

VIOLON

javascripttouchmootools
25
Rikard

Vous devez stocker les valeurs sur touchmove et les lire dans 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;
});
28
adrenalin

J'ai examiné la specification , les 4 événements tactiles hérités de l'objet touchEvent, qui comporte 3 attributs de liste contenant des informations sur tous les contacts (chaque doigt sur l'écran) au moment de l'événement , chaque liste enregistre des contacts en fonction de ce critère:

changedTouches: enregistre les contacts qui se trouvent en dehors de la surface de l'élément ciblé.

touches: Enregistre tous les contacts actuels.

targetTouch: enregistre tous les contacts actuels se trouvant dans la surface de l'élément cible.

L’événement touchend enregistre la position où le doigt a été levé à changedTouches et le rien n’est enregistré dans aucune des autres listes. Par conséquent, si vous devez y accéder, vous devez utiliser event.changedTouches[event.changedTouches.length-1], qui renvoie un objet tactile avec pageX et pageY attribue des coordonnées.
La ligne entière serait:

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


Ce que je n'ai pas encore compris, c'est s'il n'y a pas d'attributs de coordonnées dans l'objet touchEvent, pourquoi vous pouvez les utiliser lors d'événements Touchstart et Touchmove, et non avec touchend. Peut-être que la mise en œuvre a ajouté ce raccourci, ou que j'ai mal lu.

23
David Villamizar

Vous devriez utiliser changedTouches à la place touches dans 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;
});
7
idsbllp

Bien que la question ne demande pas jQuery, essayez ce code si vous avez besoin d’une alternative à jQuery. Fonctionne sur toutes les dernières versions de 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);
});

Vous pouvez éventuellement omettre 'originalEvent' et utiliser 'modifiedTouches' pour les scripts JS uniquement et jQuery/navigateurs non pris en charge.

2
Ajay Singh
touchStart(event) {
  this.startX = event.touches[0].pageX;
},
touchEnd(event) {
  this.endX = event.changedTouches[0].pageX;
},
0
邢博峰