jQuery – Accès aux coordonnées X et Y (événement personnalisé)

Je travaille sur une diapositive et la rend tactile. Je le fais en utilisant un extrait de code mentionné dans cet article: http://blog.safaribooksonline.com/2012/04/18/mapping-mouse-events-and-touch-events-onto-a-single-event /

L’auteur mentionne qu’en utilisant son code, qui déclenche un événement de normalisation sur les événements tactiles, l’access aux coordonnées X et Y est beaucoup plus facile. Et c’est exactement ce que j’ai trouvé difficile. Je n’arrive pas du tout à accéder à ces valeurs. J’ai essayé tout ce que je peux trouver.

Voici le code: http://jsfiddle.net/BC8dr/3/

normalizeEvent:

function normalizeEvent(type, original, x, y){ return jQuery.Event(type, { pageX: x, pageY: y, originalEvent: original }); } 

Au bas du code, j’ai commenté où je ne voulais pas accéder:

 jQuery(current_slide).bind(TouchMouseEvent.DOWN, onDownEvent); function onDownEvent(e){ // This is where I need X and Y coordinate access // This will return result: undefined var x = e.pageX; console.log(x); }​ 

Ma question est donc la suivante: comment accéder aux coordonnées X et Y?

* NOTE: Je suis plutôt nouveau dans JS / jQuery

Vous pouvez recevoir les coordonnées X et Y en utilisant event.clientX event.clientY manière à ce que

 function onDownEvent(e){ console.log('X = ' + e.clientX); console.log('Y = ' + e.clientY); }​ 

Vous pouvez en lire plus ici

Je sais que cette question est suffisamment ancienne, mais lors de l’utilisation de e.pageY e.PageX, j’avais des problèmes avec les téléphones Android.

Comment cela a été corrigé en ciblant une valeur différente de l’événement, comme:

 $(window).on("touchstart", function(event){ var touchStartY = event.originalEvent.touches[0].clientY; var touchStartX = event.originalEvent.touches[0].clientX; }); $(window).on("touchmove", function(event){ var touchMoveY = event.originalEvent.touches[0].clientY; var touchMoveX = event.originalEvent.touches[0].clientX; }); 

La première fonction vous donnera le x / y de l’endroit où vous touchez dans le navigateur lorsque vous démarrez. La seconde vous donnera le x / y de l’endroit où votre contact dans le navigateur est appelé à chaque fois que vous déplacez votre doigt.

Au lieu de cibler “clientX” / “clientY”, vous pouvez également cibler:

  • screenX / screenY – qui signifie que vous touchez l’écran de l’appareil lorsque le client se trouve juste dans la fenêtre du navigateur.
  • pageX / pageY – qui croit prend la valeur du coin supérieur gauche du document ou de la page Web et non de l’écran du navigateur ou de l’appareil.