Gérer les évènements touch sur mobile [JavaScript]

J’ai un projet sur lequel j’ai deux évènements “mouseenter” et “mouseleave” gérés par jQuery (pour faire le “hover”), et je voulais un comportement similaire sur mobile. Pour ce faire, je voulais qu’un “tap” affiche ce que le “hover” affiche avec la souris, puis qu’un second “tap” permette d’accéder au contenu (comme un “clic”). La solution était assez simple, mais j’ai été ensuite confronté au problème du “scroll”…. en effet il confondait le “scroll” avec un “tap”.

Pour empêcher ce comportement, il faut tester si on effectue un “scroll” en s’aidant de $(window).scrollTop():

var scrollPos=0;
$('#elem').on('mouseenter', function() {
  // affiche quelque chose quand la souris est sur la zone
  $(this).addClass('hover');
}).on('mouseleave', function() {
  // cache le contenu lorsque la souris n'est plus dans la zone
  $(this).removeClass('hover');
}).on('touchstart', function(event) {
  // lorsqu'on tape avec son doigt on doit récupérer la position dans la page
  scrollPos=$(window).scrollTop();
}).on('touchend', function(event) {
  event.preventDefault();
  // puis ici on vérifie que ce n'est pas un scroll
  if(Math.abs(scrollPos - $(window).scrollTop()) < 3){
    // si on entre là dedans c'est qu'on a bien effectué un simple "tap"
    var $this=$(this);
    if ($this.hasClass('hover')) {
      // effectue l'action de clic liée à ce bloc ... c'est donc le second "tap"
    } else {
      // effectue la même opération que lorsque la souris est dans la zone
      $this.addClass('hover');
    }
  }
});