¿Existe una posición equivalente a e.PageX para el evento 'touchstart' como para el evento de clic?

104

Estoy tratando de obtener la posición X con jQuery de un evento touchstart, usado con la función en vivo.

Es decir

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

Ahora, esto funciona con 'clic' como evento. ¿Cómo diablos (sin usar el alpha jQuery Mobile) lo obtengo con un evento táctil?

¿Algunas ideas?

Gracias por cualquier ayuda.

— ceroso
fuente

Encontré esto para aquellos que necesitan ayuda con esto: - stackoverflow.com/questions/3183872/… También funciona en touchstart.

— encerado

180

Un poco tarde, pero necesitas acceder al evento original, no al jQuery masajeado. Además, dado que se trata de eventos multitáctiles, es necesario realizar otros cambios:

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

Si desea otros dedos, puede encontrarlos en otros índices de la lista de toques.

ACTUALIZACIÓN PARA JQUERY MÁS RECIENTE:

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

— mkoistinen
fuente

Tiene un paréntesis final que falta al final, debería ser:})

— SteveLacy

Estás en lo correcto. ¡Sorprendido que nadie se ha dado cuenta durante 2 años! =) ¡Gracias!

— mkoistinen

Desafortunadamente no funcionó para mí, terminé teniendo que obtener la xey en la primera touchmove.

— Andrewb

@andrewb, añadir e.preventDefault()en el touchstartcontrolador de eventos.

— matewka

Gracias amigo. Bien e.touches[0].pageX;funcionó para mí

— Jayant Varshney

43

Utilizo esta función simple para un proyecto basado en 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;
    };

ejemplo:

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

espero que esto te sea útil;)

— Nedudi
fuente

13

No es necesario verificar el tipo de evento porque e.pageX no estará definido para eventos táctiles. Solo hazloout.x = e.pageX || e.originalEvent.touches[0].pageX;

— Griffin

1

Antes de regresar, agrego esta parte para obtener la ubicación porcentual basada en el elemento principal en caso de que ayude a alguien ... 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; volver

— sradforth

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

— gil9red

@Griffin: creo que el problema con su sugerencia es que en el escritorio, cuando el mouse está en el borde izquierdo del documento, la primera rama de su declaración arrojará 0, que se interpreta como falso, y luego los errores del navegador porque tocan no está definido en la segunda rama. ¿De acuerdo?

— MSC

13

Probé algunas de las otras respuestas aquí, pero originalEvent también estaba indefinido. Tras la inspección, encontré una propiedad clasificada TouchList (como lo sugirió otro cartel) y logré llegar a pageX / Y de esta manera:

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

— Matt.chatterley
fuente

4

esto funciona bien para todos los códigos basados en javascript. tornillo jquery

— Martian2049

2

¡Mi Salvador! Funciona perfectamente incluso para touchmove ().

— Tibix

7

Si no está usando jQuery ... necesita acceder a uno de los eventos TouchListpara obtener un Touchobjeto que tenga pageX/Y clientX/Yetc.

Aquí hay enlaces a los documentos relevantes:

Estoy usando e.targetTouches[0].pageXen mi caso.

— Scott Jungwirth
fuente

0

Consulte la referencia del desarrollador de Safari en la clase Touch .

De acuerdo con esto, pageX / Y debería estar disponible. ¿Quizás debería revisar la ortografía? asegúrese de que sea pageXy noPageX

— Tom Tu
fuente