2010-07-06 13 views
18

Si bien este código produce el comportamiento esperado de "1" al tocar la pantalla:preserva las propiedades jQuery eventos de toque?

document.getElementById('someNodeId').addEventListener('touchmove', touch, true); 

function touch(evt) { 
    evt.preventDefault(); 
    alert(evt.changedTouches.length);  
    } 

el mismo código utilizando un selector de jQuery:

$('#someNodeId').bind('touchmove', touch); 

produce el error: "TypeError: Resultado de la expresión 'evt.changedTouches' [indefinido] no es un objeto ".

(Device = iPod Touch OS 3.1.3 (7E18); jQuery 1.4.2).

¿Cómo es esto posible y lo que estoy haciendo mal?

Respuesta

33

Trate

$(document).ready (function() { 
    $("#someNodeId").bind("touchmove", function (event) { 
     var e = event.originalEvent; 
     console.log(e.targetTouches[0].pageX); 
    }); 
}); 
+2

una explicación de por qué 'originalEvent' es necesario será útil para OP y otros que no están familiarizados con la normalización de eventos de jQuery. – Anurag

+9

De hecho; la explicación se encuentra aquí: http://stackoverflow.com/questions/671498/jquery-live-removing-iphone-touch-event-attributes "Con el fin de eventos 'arreglar', clones jQuery el evento en. Si lo hace, sólo copia sobre un número limitado de propiedades por razones de rendimiento. Sin embargo, todavía se puede acceder al objeto evento original a través de la propiedad event.originalEvent ". De hecho no estoy seguro de que es muy útil el uso de jQuery en el iPhone; Fui por esta ruta debido a jQTouch pero ahora me estoy alejando de eso. – Bambax

4

puedo utilizar esta función simple de proyecto basado 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('mousemove touchmove', function(e){ 
    console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40} 
}) 

Esperamos que esto sea útil para usted;)

Cuestiones relacionadas