javascript désactiver le toucher

JavaScript No Touching

Avec la popularité des appareils mobiles, de plus en plus de sites Web et d'applications commencent à se concentrer sur l'expérience mobile. Dans ce cas, la technologie des écrans tactiles est largement utilisée. Cependant, dans certains cas, nous devons désactiver le toucher pour garantir le bon fonctionnement du site Web ou de l’application. Cet article explique comment désactiver le toucher à l'aide de JavaScript.

Qu'est-ce que le toucher ?

Sur les appareils mobiles, nous touchons généralement l'écran avec nos doigts pour fonctionner, ce qu'on appelle le toucher. Le toucher se présente sous de nombreuses formes, notamment les tapotements avec un seul doigt, les glissements, les pincements, etc. Dans le développement Web, nous pouvons utiliser CSS et JavaScript pour gérer les événements tactiles.

Pourquoi désactiver le toucher ?

Dans certains cas, nous devons désactiver le toucher pour assurer le bon fonctionnement du site Web ou de l'application. Voici quelques scénarios courants :

1. Conflit d'interaction entre éléments

Lorsqu'il y a plusieurs éléments interactifs sur une page (tels que des boutons, des liens, des galeries, etc.), des conflits peuvent survenir entre eux. Par exemple, un utilisateur peut accidentellement appuyer sur un bouton au lieu de vouloir cliquer sur un autre lien. Dans ce cas, nous devons désactiver le toucher pour éviter cette situation.

2. Évitez les erreurs d'utilisation

Les utilisateurs peuvent accidentellement toucher certaines zones sensibles, telles que le bouton de suppression, le bouton de réglage, etc. Pour éviter ce mauvais fonctionnement, nous devons désactiver le toucher.

3. Améliorer les performances

Dans certains cas, la désactivation du toucher peut améliorer les performances. Par exemple, lorsque nous avons une très grande galerie ou un très grand tableau, le fait de glisser peut provoquer un bégaiement ou un crash de la page. Dans ce cas, la désactivation du toucher peut nous aider à rendre la page plus réactive.

Comment désactiver le tactile ?

En JavaScript, nous pouvons désactiver le toucher en utilisant :

1. En utilisant CSS

Nous pouvons désactiver le toucher en utilisant la propriété touch-action de CSS. Cet attribut a les options suivantes :

• auto : Le navigateur peut gérer librement les événements tactiles.
• aucun : le navigateur ne gère pas les événements tactiles.
• pan-x : Autoriser le mouvement horizontal.
• pan-y : Autoriser le mouvement vertical.
• manipulation : Prise en charge du zoom et du panoramique avec une touche à deux doigts.

Le code suivant peut désactiver les événements tactiles pour toute la page :

body {
    touch-action: none;
}

Si vous souhaitez uniquement désactiver les événements tactiles pour un certain élément, vous pouvez le faire comme ceci :

.el {
    touch-action: none;
}

2. Utilisez JavaScript

Si vous en avez besoin plus de contrôle, nous pouvons utiliser JavaScript pour désactiver le toucher. Le code suivant peut désactiver les événements tactiles pour toute la page :

document.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

Si vous souhaitez uniquement désactiver les événements tactiles pour un certain élément, vous pouvez procéder comme suit :

var el = document.getElementById('el');
el.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

Dans le code ci-dessus, nous utilisons la méthode PreventDefault() pour empêcher les événements tactiles Le comportement par défaut consiste à désactiver le toucher.

Notez que nous passons { passive: false } comme option à l'écouteur d'événement, ceci afin de garantir que la méthode PreventDefault() prend effet. Si cette option n'est pas définie, la méthode PreventDefault() risque de ne pas fonctionner, empêchant ainsi la désactivation du toucher.

Résumé

Cet article explique comment désactiver le toucher à l'aide de JavaScript. Nous pouvons désactiver le toucher en utilisant CSS ou JavaScript, selon nos besoins. Quoi qu’il en soit, chaque scénario de désactivation tactile doit être soigneusement étudié pour garantir le bon fonctionnement du site Web ou de l’application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!