Manipulation des appareils tactiles

Question

J'ai ce composant de carrousel horizontal que je veux faire fonctionner à la fois pour les événements souris et glisser. Tout fonctionne correctement, à l'exception d'un seul bit: dans les périphériques tactiles, je ne veux pas que le carrousel défile horizontalement si l'utilisateur essaie de faire défiler verticalement la page entière.

Qu'est-ce que je fais est,

• sur mousedown/touchstart - empêcher que l'événement de se propager pour éviter défiler la page, option permet de sélectionner, etc ...
• le premier événement de déplacement, sur la carrousel, j'ai mis un délai de 50ms pour déterminer si l'utilisateur se déplace verticalement ou horizontalement.
• Si deltaX < deltaY, j'arrêter mon défilement horizontal, feu mannuellement l'événement touchstart, avec un drapeau indiquant que je tirai il mannuellement
• sur mon mousedown/gestionnaire de touchstart, je lis que « mannuellement » drapeau et, si elle est vrai, je renvoie vrai de ma fonction de sorte que tous les événements du navigateur par défaut, comme le défilement vertical de la page, continuent à fonctionner.

Cela ne fonctionne pas, tout ce que je fais répond correctement mais le navigateur ne ramasse pas et ne fait pas défiler la page. J'espère que je suis moi-même expliquais assez correctement pour vous les gars peuvent me aider ... Je n'ai pas un exemple en ligne parce que ce projet est un « secret » pour mon entreprise ...

Merci

Answer 1

J'étais essayer de faire la même chose que vous (étiez?). La clé est de vérifier touchmove si la touche actuelle et la dernière touche est plus verticale que horizontale. Si le toucher était plus à gauche ou à droite, empêchez l'événement par défaut, sinon ignorez-le. Voici ce que j'ai fini par écrire. J'espère que cela fonctionne pour vous!

var gestures = function() { 
    var self = this, 
    coords = { 
     startX: null, 
     startY: null, 
     endX: null, 
     endY: null 
    }; 

    self.$el.on('touchstart', function(e) { 
     coords.startX = e.originalEvent.targetTouches[0].clientX; 
     coords.startY = e.originalEvent.targetTouches[0].clientY; 
     coords.endX = coords.startX; 
     coords.endY = coords.startY; 
    }); 

    self.$el.on('touchmove', function(e) { 
     var newX = e.originalEvent.targetTouches[0].clientX, 
      newY = e.originalEvent.targetTouches[0].clientY, 
      absX = Math.abs(coords.endX - newX), 
      absY = Math.abs(coords.endY - newY); 

     // If we've moved more Y than X, we're scrolling vertically 
     if (absX < absY) { 
      return; 
     } 

     // Prevents the page from scrolling left/right 
     e.preventDefault(); 

     coords.endX = newX; 
     coords.endY = newY; 
    }); 

    self.$el.on('touchend', function(e) { 
     var swipe = {}, 
      deltaX = coords.startX - coords.endX, 
      deltaY = coords.startY - coords.endY, 
      absX = Math.abs(deltaX), 
      absY = Math.abs(deltaY); 

     swipe.distance = (absX > absY) ? absX : absY; 
     swipe.direction = (absX < absY) ? 
      (deltaY < 0 ? 'down' : 'up') : 
      (deltaX < 0 ? 'right' : 'left'); 

     // console.log(swipe.direction + ' ' + swipe.distance + 'px'); 

     // If we have a swipe of > 50px, let's use it! 
     if (swipe.distance > 50) { 
      if (swipe.direction === 'left') { 
       self.advance(); 
      } else if (swipe.direction === 'right') { 
       self.retreat(); 
      } 
     } 

    }); 
}; 

this est mon objet curseur et $el est l'élément conteneur.