Событие щелчка вызывается только при двойном нажатии, когда какой-либо элемент изменяется состоянием наведения мыши на мобильных устройствах IOS

Question

Я реализовал блок с двумя слоями, содержащимися в нем. Он прослушивает события mouseover и mouseout.На рабочем столе, когда мы наведем на него курсор, будет показан один слой, а другой будет скрыт (я использую свойство display, чтобы сделать это в JS).Но на устройствах IOS, таких как Iphone / Ipad, когда я нажимаю на этот блок, один слой будет показан, а другой будет скрыт, как я и ожидал.Но проблема в том, что когда я нажимаю какую-то кнопку на этой странице, например кнопку «Наверх» или навигацию по меню, которые прослушивают событие щелчка, мне приходится дважды нажимать, чтобы вызвать их срабатывание.Когда я впервые нажимаю на эти кнопки, кажется, что запускается событие выхода из мыши.

Я проводил исследования и вижу, что устройства IOS не будут вызывать событие click, когда содержимое какого-либо элемента изменяется в результате события mouseover или mouseenter.Можно ли как-нибудь это исправить?

Это мой код для отображения и отображения слоев блока:

gridImg[index].addEventListener("mouseover", function () {
      var background = document.getElementById('bg_' + index);
      var infoBlock = document.getElementById('info_' + index);
      background.style.display = "none";
      infoBlock.style.display = "block";
});
gridImg[index].addEventListener("mouseleave", function () {
      var background = document.getElementById('bg_' + index);
      var infoBlock = document.getElementById('info_' + index);
      background.style.display = "block";
      infoBlock.style.display = "none";
});