Hover on mobile

Проблема актуальна, можно решать таким образом:

<div class="top-menu" data-hover="hover-on-menu">
<a href="/to/your/url" data-hover="hover-on-link">Hello</a>

<script>

var touchHover = function() {
    $('[data-hover]').click(function(e){
        e.preventDefault();
        var $this = $(this);
        var onHover = $this.attr('data-hover');
        var linkHref = $this.attr('href');
        if (linkHref && $this.hasClass(onHover)) {
            location.href = linkHref;
            return false;
        }
        $this.toggleClass(onHover);
    });
};

$(document).ready(function() { touchHover(); });

</script>
Даем объектам атрибут data-hover с наименованием класса, 
который отображает состояние hover этого элемента, 
в дополнение проверяем на ссылку, если ссылка то переходим "по второму клику".

const ss = document.querySelectorAll('.menu .has-submenu > a');

ss.forEach(item => {
  console.log(item);
  const dataHref = item.getAttribute('href');
  let count = 0;
//   console.log(dataHref);
  item.setAttribute('data-href', dataHref);
  item.setAttribute('href', '#');
  item.addEventListener('click', (e) => {
      count++
      console.log(count);
    if (count > 1){
        item.setAttribute('href', dataHref);
    } 
  })
})