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.

javascript jquery events click touch wachsartig
quelle
Ich habe dies für diejenigen gefunden, die Hilfe benötigen: - stackoverflow.com/questions/3183872/… Es funktioniert auch beim Touchstart.
Waxical

Antworten:

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