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');
    }
  }
});