web-dev-qa-db-fra.com

Empêcher le défilement de la page en glissant dans IOS et Android

Je travaille sur un jeu de canevas html5, mais je ne sais pas comment gérer les événements tactiles. Lorsqu'un utilisateur touche l'écran et fait glisser, le navigateur fait défiler la page. Je voudrais l'empêcher et obtenir le démarrage tactile et la position finale tactile. C'est possible?

Merci d'avance

javascripthtmlcanvastouch
20
Danny Fox

Vous devez remplacer le comportement tactile par défaut pour arrêter les événements de touche de faire glisser la page. De toute évidence, vous devrez les gérer à nouveau si votre page devient plus grande que la zone disponible, mais lorsque vous créez un jeu, vous allez supposer que vous faites une mise en page à 100%/100%.

function preventBehavior(e) {
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, {passive: false});

Edit: voici la recommandation W3C parlant des événements tactiles, ce qui pourrait vous être utile.

25
dmp

En raison des modifications radicales apportées dans les versions récentes de Chrome, les réponses ci-dessus ne sont plus correctes. Attacher un écouteur d'événement tactile au document ou aux éléments du corps entraînera l'enregistrement de l'écouteur d'événement en mode "passif", ce qui fera ignorer les appels à preventDefault.

Il existe deux solutions:

  • La solution préférée est d'utiliser le style CSS touch-action pour spécifier qu'aucun défilement ne doit avoir lieu (par exemple avec la valeur "aucun")

  • Dans les cas où cela n'est pas approprié (par exemple, si le type d'interaction doit changer dynamiquement d'une manière qui ne peut pas être déterminée avant le début du geste), l'écouteur d'événements doit être enregistré avec le troisième paramètre défini sur { passive: false } (vous devez cependant effectuer une détection du navigateur pour vous assurer que ce style est pris en charge en premier).

12
Jules

Si vous ne souhaitez pas utiliser jQuery mobile ou toute autre bibliothèque, vous pouvez essayer ceci.

var startX, startY, endX, endY;
document.addEventListener("touchstart", function(e){
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;

    e.preventDefault();//Stops the default behavior
}, false);

document.addEventListener("touchend", function(e){
    endX = e.touches[0].pageX;
    endY = e.touches[0].pageY;

    e.preventDefault();//Stops the default behavior
}, false);
10
ShankarSangoli
canvas.addEventListener('touchstart', function(e)
{
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}
canvas.addEventListener('touchend', function(e)
{
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}

Voici un bon article sur le toucher et les gestes sur les téléphones mobiles:

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

3
papaiatis

Solution suivante empêchant le défilement lors du glissement ET en même temps le défilement habituel fonctionne (lorsque vous ne faites pas glisser)

var scrollable = true;

var listener = function(e) {
    if (! scrollable) {
        e.preventDefault();
    }
}

document.addEventListener('touchmove', listener, { passive:false });


onDragstartHandler() {
  scrollable = false;
}

onDragendHandler(} {
  scrollable = true;
}

N'oubliez pas de lier onDragstartHandler et onDragendHandler aux éléments associés

0
Alex Golovin