Сделка с сенсорными разрешениями и зависанием

Я пытаюсь удалить или предотвратить все зависание на сенсорном устройстве. Я пытаюсь использовать несколько сценариев, но это не работает для меня. Как я могу проверить его с помощью инструментов dev? Я пытаюсь использовать script, но имею некоторые ошибки. Невозможно прочитать свойство 'addEventListener' из null. Но он работает здесь codepen Ошибка в том, что дерево dom еще не загружено?

<html class="hover-active">

$(window).on('load', function() {

        if (!('addEventListener' in window)) {
            return;
        }

        var htmlElement = document.querySelector('html');

        function touchStart() {
            htmlElement.classList.remove('hover-active');

            htmlElement.removeEventListener('touchstart', touchStart);
        }

        htmlElement.addEventListener('touchstart', touchStart);
    });

также я пробую этот

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){}

Также я стараюсь использовать modernizr, он работает только для каждого селектора внутри html.touch и html.no-touch

function is_touch_device() {
 return 'ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if ( is_touch_device() ) {
  $('html').addClass('touch')
} else {
  $('html').addClass('no-touch')
} 


html.touch .hover-me:hover {
   pointer-events: none !important;
   cursor: pointer;

}
html.touch a:hover {
   pointer-events: none !important;
   cursor: pointer;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch .hover-me:hover {
   width: auto;
   color:blue;
   background:green;
}
html.no-touch a:hover {
   width: auto;
   color:blue;
   background:green;
}

Но мне нужно удалить все: селектор hover, * не работает. И это не работает.

  .hover-me:hover {
     background: yellow;
 }
html.touch .hover-me:hover {
   pointer-events: none !important;
   cursor: pointer;

}

Сделка с сенсорными разрешениями и зависанием

Ответы