2011-01-24 17 views
90

Estoy tratando de obtener la posición X con jQuery de un evento touchstart, ¿usado con la función en vivo?¿Hay un equivalente a la posición de e.PageX para el evento 'touchstart' como para el evento click?

I.e.

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

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

¿Alguna idea?

Gracias por cualquier ayuda.

+0

encontré esto para aquellos que están necesitando ayuda en esto: - http: // stackoverflow .com/questions/3183872/does-jquery-preserve-touch-events-properties También funciona en touchstart. – waxical

Respuesta

153

Un poco tarde, pero necesita acceder al evento original, no al masajeado de jQuery. Además, dado que estos son eventos multi-touch, otros cambios deben hacerse:

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

Si desea que otros dedos, se puede encontrar en otros índices de la lista toques.

ACTUALIZACIÓN DE NUEVOS JQUERY:

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

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

+0

Correcto. ¡Sorprendido, nadie lo ha notado por 2 años! =) Gracias! – mkoistinen

+0

Desafortunadamente, no funcionó para mí, terminé teniendo que obtener x e y en el primer 'touchmove'. – andrewb

0

Compruebe Safari developer reference on Touch class.

De acuerdo con esto, la página X/Y debería estar disponible, ¿quizás debería revisar la ortografía? asegúrese de que sea pageX y no PageX

33

utilizo esta función simple para 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} 
}) 

Esperamos que esto sea útil para usted;)

+2

Muy útil, gracias. –

+10

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

+1

Antes de volver, agrego esta parte para obtener la ubicación porcentual basada en el elemento padre en caso de que ayude a alguien ... \t \t var offsetParent = e.target.offsetParent ; \t \t var parentLeft = e.target.offsetParent.offsetLeft; \t \t out.percentX = (out.x - offsetParent.offsetLeft)/offsetParent.offsetWidth; \t \t out.percentY = (out.y - offsetParent.offsetTop)/offsetParent.offsetHeight; \t \t devolución; – sradforth

8

He intentado algunas de las otras respuestas aquí, pero originalEvent también estaba indefinido. Tras la inspección, se encuentra una propiedad TouchList clasificado (como se sugiere en otro cartel) y logró llegar a pageX/Y de esta manera:

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

esto funciona bien para todos los códigos basados ​​en Javascript. tornillo jquery – Martian2049

Cuestiones relacionadas