Comment capturer les coordonnées de touchend?
je suis en train de capturer touch coordonner sur l' touchend événement, mais obtenir indéfini. touchstart événement fonctionne bien, mais même concept échoue sur touchend. J'ai construit ce code avec mousedown et mouseup et fonctionne bien.
Ce qui me manque?
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;
});
5 réponses
vous devez stocker les valeurs sur touchmove et de la lire 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;
});
J'ai été à la recherche à l' cahier des charges, les 4 touch events héritent de touchEvent de l'objet, qui a 3 liste des attributs contenant des informations sur toutes les touches (chaque doigt sur l'écran) au moment de l'événement, chaque liste enregistre touche sur ces critères:changedTouches: sauvegarde les touches qui sont hors de la surface de l'élément ciblé.touches: sauvegarde tous les courants toucher.targetTouch: enregistre toutes les touches courantes qui se trouvent à la surface de l'élément cible.
Le touchend event sauve la position où le doigt a été soulevé à changedTouches, et rien n'est enregistré dans aucune des autres listes, donc si vous avez besoin pour y accéder, vous devez utiliser event.changedTouches[event.changedTouches.length-1], renvoie un objet tactile avec les attributes pageX et pageY pour les coordonnées.
L'ensemble de la ligne être:
span.innerHTML = event.changedTouches[event.changedTouches.length-1].pageX;Ce que je n'ai pas encore compris, c'est qu'il n'y a pas de coordonnées dans le
touchEvent objet, pourquoi vous les utilisez lors des évènements touchstart et touchmove, et pas avec touchend. Peut-être que l'implémentation a ajouté ce raccourci, ou je me suis trompé.
Vous devez utiliser changedTouches au lieu de touchestouchend
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;
});
bien que la question n'ait pas demandé 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' changedTouches ' pour js seulement script et jQuery/browsers qui ne supporte pas.
touchStart(event) {
this.startX = event.touches[0].pageX;
},
touchEnd(event) {
this.endX = event.changedTouches[0].pageX;
},