Existe-t-il une position équivalente à la position e.PageX pour l'événement 'touchstart' comme il y en a pour l'événement click?

104

J'essaie d'obtenir la position X avec jQuery d'un événement touchstart, utilisé avec la fonction live?

C'est à dire

$('#box').live('touchstart', function(e) { var xPos = e.PageX; } );

Maintenant, cela fonctionne avec «clic» comme événement. Comment diable (sans utiliser l' alpha jQuery Mobile) puis-je l'obtenir avec un événement tactile?

Des idées?

Merci pour toute aide.

javascript jquery events click touch ciré
la source
J'ai trouvé ceci pour ceux qui ont besoin d'aide sur ceci: - stackoverflow.com/questions/3183872/... Cela fonctionne également sur touchstart.
waxical le

Réponses:

180

Un peu tard, mais vous devez accéder à l'événement d'origine, pas à celui massé jQuery. De plus, comme il s'agit d'événements multi-touch, d'autres modifications doivent être apportées:

$('#box').live('touchstart', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

Si vous voulez d'autres doigts, vous pouvez les trouver dans d'autres index de la liste des touches.

MISE À JOUR POUR LES NOUVEAUX JQUERY:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});
mkoistinen
la source
Vous avez une parenthèse de fin manquante à la fin, elle devrait être:})
SteveLacy
Tu as raison. Surpris que personne ne l'ait remarqué depuis 2 ans! =) Merci!
mkoistinen le
Malheureusement, cela n'a pas fonctionné pour moi, j'ai fini par avoir à obtenir le x et le y sur le premier touchmove.
andrewb
@andrewb, ajouter e.preventDefault()au touchstartgestionnaire d'événements.
matewka le
Merci mon pote. Bien e.touches[0].pageX;travaillé pour moi
Jayant Varshney
43

J'utilise cette fonction simple pour un projet basé sur JQuery 

    var pointerEventToXY = function(e){
      var out = {x:0, y:0};
      if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        out.x = touch.pageX;
        out.y = touch.pageY;
      } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        out.x = e.pageX;
        out.y = e.pageY;
      }
      return out;
    };

exemple:

$('a').on('mousedown touchstart', function(e){
  console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

j'espère que cela vous sera utile;)

Nedudi
la source
13
Il n'est pas nécessaire de vérifier le type d'événement car e.pageX ne sera pas défini pour les événements tactiles. Just doout.x = e.pageX || e.originalEvent.touches[0].pageX;
Griffin
1
Avant de revenir, j'ajoute cette partie pour obtenir l'emplacement du pourcentage basé sur l'élément parent au cas où cela aiderait quelqu'un ... var offsetParent = e.target.offsetParent; var parentLeft = e.target.offsetParent.offsetLeft; out.percentX = (out.x - offsetParent.offsetLeft) / offsetParent.offsetWidth; out.percentY = (out.y - offsetParent.offsetTop) / offsetParent.offsetHeight; revenir;
sradforth
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?
gil9red
@Griffin - Je pense que le problème avec votre suggestion est que sur le bureau, lorsque la souris est sur le bord gauche du document, la première branche de votre déclaration donnera 0, ce qui est interprété comme faux, puis les erreurs du navigateur car elles touchent n'est pas défini sur la deuxième branche. Se mettre d'accord?
MSC
13

J'ai essayé quelques-unes des autres réponses ici, mais originalEvent était également indéfini. Lors de l'inspection, j'ai trouvé une propriété classée TouchList (comme suggéré par une autre affiche) et j'ai réussi à accéder à pageX / Y de cette façon:

var x = e.changedTouches[0].pageX;
matt.chatterley
la source
4
cela fonctionne bien pour tous les codes basés sur javascript. vis jquery
Martian2049
2
Mon Sauveur! Fonctionne parfaitement même pour touchmove ().
Tibix