¿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.

javascript jquery events click touch ceroso
fuente
Encontré esto para aquellos que necesitan ayuda con esto: - stackoverflow.com/questions/3183872/… También funciona en touchstart.
encerado

Respuestas:

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