Téléscopage avec le scroll sur les écrans tactiles #13

Sur les écrans tactiles, quand on veut scroller la page avec le doigt, si on commence le geste niveau d'une zone "crayonnable", ça ouvre le mode d'édition des crayons.

Ce qui rend la navigation très très compliquée.

Il faudrait arriver à différencier les clics des scrolls.

2 pistes après une recherche rapide - donc pas sûr que ça soit les meilleures méthodes - :

Piste 1

https://www.geeksforgeeks.org/how-to-differentiate-mouse-click-and-drag-event-using-javascript/

Là pour faire un truc au clic ils se branchent sur l'event mouseup.
En parallèle ils ajoutent 2 écouteurs d'évènements pour savoir si la souris est en mouvement ou pas (mousemove → scroll, mousedown → clic).
Ce qui permet de distinguer les simples clics des scrolls.

	let drag = false;
	document.addEventListener(
		'mousedown', () => drag = false);

	document.addEventListener(
		'mousemove', () => drag = true);

	document.addEventListener(
		'mouseup', () => console.log(
			drag ? 'drag' : 'click'));

Piste 2

https://stackoverflow.com/a/66143678

Un peu la même chose, mais en écoutant directement un event scroll.
Et donc au clic, ça permet de discréminer.

var disable_click_flag = false;
var timeout = null;

window.addEventListener('scroll', () => {
  disable_click_flag = true;

  if(timeout) clearTimeout(timeout);
  
  timeout = setTimeout(function(){ disable_click_flag = false }, 250);
}

element.addeventlistener('click', () => {
  if(disable_click_flag === false{
    #do somthing
  }
})

"sur les écrans tactiles" : tu peux préciser l'OS et le navigateur ? j'ai bien peur que ça soit assez différent entre un OS et un autre...

Firefox / Mobian
+ le navigateur d'Uports (feu Ubuntu Touch)

Et c'est reproductible avec les outils de dev de chrome - quoique moins souvent