Gibt es eine Entsprechung zur e.PageX-Position für das 'Touchstart'-Ereignis wie für das Klick-Ereignis?

104

Ich versuche mit jQuery die X-Position eines Touchstart-Ereignisses zu ermitteln, das mit der Live-Funktion verwendet wird.

Dh

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

Dies funktioniert nun mit 'click' als Ereignis. Wie um alles in der Welt (ohne Alpha jQuery Mobile) erhalte ich es mit einem Touch-Ereignis?

Irgendwelche Ideen?

Vielen Dank für jede Hilfe.

— wachsartig
quelle

Ich habe dies für diejenigen gefunden, die Hilfe benötigen: - stackoverflow.com/questions/3183872/… Es funktioniert auch beim Touchstart.

— Waxical

180

Etwas spät, aber Sie müssen auf das ursprüngliche Ereignis zugreifen, nicht auf das massierte jQuery-Ereignis. Da es sich um Multi-Touch-Ereignisse handelt, müssen weitere Änderungen vorgenommen werden:

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

Wenn Sie andere Finger möchten, können Sie diese in anderen Indizes der Berührungsliste finden.

UPDATE FÜR NEUERE JQUERY:

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

— mkoistinen
quelle

Sie haben eine fehlende

— Endklammer

Du hast Recht. Überrascht hat es seit 2 Jahren niemand mehr bemerkt! =) Danke!

— Mkoistinen

Leider hat es bei mir nicht funktioniert, ich musste am ersten das x und y bekommen touchmove.

— Andrew

@andrewb, fügen Sie e.preventDefault()in touchstartEvent - Handler.

— Matewka

Danke Kumpel. Gut e.touches[0].pageX;für mich gearbeitet

— Jayant Varshney

43

Ich benutze diese einfache Funktion für JQuery-basierte Projekte

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

Beispiel:

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

hoffe das ist nützlich für dich;)

— Nedudi
quelle

13

Der Ereignistyp muss nicht überprüft werden, da e.pageX für Touch-Ereignisse nicht definiert ist. Tun Sie es einfachout.x = e.pageX || e.originalEvent.touches[0].pageX;

— Griffin

1

Bevor ich zurückkehre, füge ich diesen Teil hinzu, um die prozentuale Position basierend auf dem übergeordneten Element zu ermitteln, falls dies jemandem hilft ... 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; kehre zurück;

— Sradforth

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?

— Gil9red

@Griffin - Ich denke, das Problem mit Ihrem Vorschlag ist, dass auf dem Desktop, wenn sich die Maus am linken Rand des Dokuments befindet, der erste Zweig Ihrer Anweisung 0 ergibt, was als falsch interpretiert wird, und dann der Browser aufgrund von Berührungen fehlerhaft ist ist im zweiten Zweig undefiniert. Zustimmen?

— MSC

13

Ich habe hier einige der anderen Antworten ausprobiert, aber originalEvent war auch undefiniert. Bei der Inspektion wurde eine TouchList-klassifizierte Eigenschaft gefunden (wie von einem anderen Poster vorgeschlagen) und es gelang, auf folgende Weise zu pageX / Y zu gelangen:

var x = e.changedTouches[0].pageX;

— matt.chatterley
quelle

4

Dies funktioniert gut für alle Javascript-basierten Codes. Schraube jquery

— Martian2049

2

Mein Retter! Funktioniert auch für touchmove () perfekt.

— Tibix

7

Wenn Sie jQuery nicht verwenden, müssen Sie auf eines der Ereignisse zugreifen TouchList, um ein TouchObjekt mit pageX/Y clientX/Yusw. zu erhalten.

Hier sind Links zu den relevanten Dokumenten:

Ich benutze e.targetTouches[0].pageXin meinem Fall.

— Scott Jungwirth
quelle

0

Überprüfen Sie die Safari- Entwicklerreferenz für die Touch-Klasse .

Demnach sollte pageX / Y verfügbar sein - vielleicht sollten Sie die Rechtschreibung überprüfen? Stellen Sie sicher, dass es ist pageXund nichtPageX

— Tom Tu
quelle