Esiste un equivalente alla posizione di e.PageX per l'evento "touchstart" come per l'evento clic?

104

Sto cercando di ottenere la posizione X con jQuery di un evento touchstart, utilizzato con la funzione live?

ie

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

Ora, questo funziona con "clic" come evento. Come diavolo (senza usare Alpha jQuery Mobile) posso ottenerlo con un evento touch?

Qualche idea?

Grazie per qualsiasi aiuto.

— waxical
fonte

Ho trovato questo per coloro che stanno avendo bisogno aiuto su questo: - stackoverflow.com/questions/3183872/... Funziona anche su TouchStart.

— cera

180

Un po 'in ritardo, ma devi accedere all'evento originale, non a quello massaggiato con jQuery. Inoltre, poiché si tratta di eventi multi-touch, è necessario apportare altre modifiche:

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

Se vuoi altre dita, puoi trovarle in altri indici dell'elenco dei tocchi.

AGGIORNAMENTO PER NUOVI JQUERY:

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

— mkoistinen
fonte

Hai una parentesi finale mancante alla fine, dovrebbe essere:})

— SteveLacy

Hai ragione. Sorpreso nessuno se ne accorge da 2 anni! =) Grazie!

— mkoistinen

Sfortunatamente non ha funzionato per me, ho finito per dover ottenere la x e la y al primo touchmove.

— andrewb

@andrewb, aggiungi e.preventDefault()nel touchstartgestore eventi.

— matewka

Grazie compagno. e.touches[0].pageX;

— Ha

43

Uso questa semplice funzione per progetti basati su 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;
    };

esempio:

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

spero che questo ti sia utile;)

— Nedudi
fonte

13

Non è necessario controllare il tipo di evento perché e.pageX non sarà definito per gli eventi di tocco. Fallo e bastaout.x = e.pageX || e.originalEvent.touches[0].pageX;

— Griffin

1

Prima di tornare, aggiungo questa parte per ottenere la posizione percentuale basata sull'elemento genitore nel caso in cui aiuti qualcuno ... 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; tornare fuori;

— sradforth

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

— gil9red

@ Griffin - Penso che il problema con il tuo suggerimento sia che sul desktop, quando il mouse si trova sul bordo sinistro del documento, il primo ramo della tua istruzione restituirà 0, che viene interpretato come falso, e quindi gli errori del browser perché tocca è indefinito nel secondo ramo. Essere d'accordo?

— MSC

13

Ho provato alcune delle altre risposte qui, ma anche originalEvent era indefinito. Dopo l'ispezione, ho trovato una proprietà classificata TouchList (come suggerito da un altro poster) e sono riuscito ad arrivare a pageX / Y in questo modo:

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

— matt.chatterley
fonte

4

funziona bene per tutti i codici basati su javascript. screw jquery

— Martian2049

2

Mio salvatore! Funziona perfettamente anche per touchmove ().

— Tibix

7

Se non stai usando jQuery ... devi accedere a uno degli eventi TouchListper ottenere un Touchoggetto con pageX/Y clientX/Yecc.

Di seguito sono riportati i collegamenti ai documenti pertinenti:

Sto usando e.targetTouches[0].pageXnel mio caso.

— Scott Jungwirth
fonte

0

Controlla il riferimento dello sviluppatore Safari sulla classe Touch .

Secondo questo, pageX / Y dovrebbe essere disponibile - forse dovresti controllare l'ortografia? assicurati che sia pageXe noPageX

— Tom Tu
fonte