ontouch versus onclick comment les différencier

[Rego38]

Bonjour,
Je suis face à un soucis : je lie les évènements ontouchstart (ontouchmove et ontouchend) et onclick à une même image, pour :
- soit la faire glisser au doigt (dans un slider) => avec ontouch...
- soit la faire s'afficher en plein écran => avec onclick

Jusque là, rien de particulier : si on slide l'image alors elle se décale, et si on clique dessus alors elle s'affiche en plein écran.

Mais je viens de m'apercevoir que lorsque je clique sur l'image alors les fonctions ontouchstart, move et end sont également lancées.
Et elles sont exécutées même avant la fonction onclick.

Et, sans rentrer dans le détail, cela me crée des problèmes dans une variable que j'incrémente.

Ma question est donc la suivante : comment faire pour éviter le lancement des fonctions ontouchstart, move et end quand ej fais un simple clique sur l'image.

Merci avance

[webmaster]

Bonjour,

J'ai fait le test également et en effet, l'enchainement des événements est bien touchstart, touchend puis click.
Il n'y a pas de touchmove dans le cas d'un click.
J'imagine que c'est par cette astuce qu'il faut détecter la différence. Mais cela implique d'utiliser un timer pour attendre les quelques centiemes de secondes la fin du click.

[kimjenner]

Ainsi, lorsque l'utilisateur clique sur l'image, les fonctions ontouchstart, ontouchmove et ontouchend ne seront pas lancées, car le système détectera qu'il s'agit d'un simple clic et non d'un geste tactile.

[jamespears]

Pour éviter que les événements touch se déclenchent lors d’un simple clic, il faut généralement détecter la différence entre un “tap” et un vrai mouvement. Une solution courante est de mesurer le déplacement entre touchstart et touchend : si le mouvement est très faible (par ex. < 5 px), on considère que c’est un clic et on ignore le traitement “touch”. Sinon, c’est un slide. Tu peux aussi utiliser event.preventDefault() ou stopPropagation() au bon endroit pour empêcher les événements indésirables. Ça permet de séparer proprement les deux comportements.

[delion]

This is a common issue when using both ontouchand uncle on the same element.
THEtouchstart → touchend → click, so your touch handlers will always fire before the click event unless you differentiate the gestures manually.
You can track the movement distance.
If the finger moves only a tiny amount, treat it as a “click.”
If it moves more than a threshold, treat it as a “slide,” and don’t trigger the click action.

Here’s a simple approach:
let startX = 0;
let startY = 0;
let moved = false;

const threshold = 10; // pixels

image.addEventListener('touchstart', (e) => {
moved = false;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

image.addEventListener('touchmove', (e) => {
const dx = Math.abs(e.touches[0].clientX - startX);
const dy = Math.abs(e.touches[0].clientY - startY);
if (dx > threshold || dy > threshold) {
moved = true; // It's a slide
}
});

image.addEventListener('touchend', (e) => {
if (!moved) {
// Treat as click
image.click();
} else {
// Handle slide here
}
});

[avalemoine48]

Utilise un flag : si touchmove a bougé, ignore le click.