2010-07-06 4 views
18

Bien que ce code produit le comportement attendu de "1" en touchant l'écran:Est-ce que jQuery conserve les propriétés des événements tactiles?

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

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

le même code à l'aide d'un sélecteur jQuery:

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

produit l'erreur: « Erreur de type: Résultat d'expression 'evt.changedTouches' [indéfini] n'est pas un objet ".

(Périphérique = iPod Touch OS 3.1.3 (7E18); jQuery 1.4.2).

Comment est-ce possible et qu'est-ce que je fais de mal?

Répondre

33

Essayez

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

une explication de la raison pour laquelle 'originalEvent' est nécessaire sera utile à OP et aux autres qui ne connaissent pas la normalisation des événements de jQuery. – Anurag

+9

En effet; l'explication se trouve ici: http://stackoverflow.com/questions/671498/jquery-live-removing-iphone-touch-event-attributes « Pour les événements « fix », clones jQuery l'événement Dans. Ce faisant, il ne copie que sur un nombre limité de propriétés pour des raisons de performances, mais vous pouvez toujours accéder à l'objet d'événement d'origine via la propriété event.originalEvent. " En fait, je ne suis pas sûr que ce soit très utile d'utiliser jQuery sur iPhone; J'ai emprunté cette route à cause de jQTouch mais maintenant je m'en écarte. – Bambax

4

J'utilise cette fonction simple pour un projet basé 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; 
}; 

exemple:

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

espère que ce sera utile pour vous;)

Questions connexes