Gavr_Gavr
@Gavr_Gavr

Как ведут себя устройства со стилусом при прослушке события moseover?

Я пытался разделить клики и событие hover, для этого я использовал медиазапрос в css media (any-hover: hover). и код для определения медиасобытия в js, вот такой:

if (window.matchMedia && window.matchMedia("(pointer:coarse)").matches) { "действия при клике на объект"}


Но в таком подходе оказалось что media (any-hover: hover) не работает для устройств со стилусом, и даже для некоторых телефонов (у меня Samsung galaxy M51 и на нем ховер РАБОТАЕТ! в этом медиазапросе).

Я решил проверить какие типы медиазапросов срабатывают на телефонах со стилусом и без (опираясь на то, что мое устройство Samsung M51 ведет себя также как и телефоны со стилусами), и получил такой результат:
НА МОБИЛКЕ:
Без стилуса: pointer: fine = false, hover: hover = false
Со стилусом: pointer: fine = false, hover: hover =true

НА ПК: fine: true, hover: true

Соответственно для отображения стилей при ховере на ПК я решаю использовать медиазапрос media (pointer: fine)

А для того что бы "ховерить" при наведении стилусом я хочу в HTML задать класс hover и при выполнении условия (pointer: fine = false, hover: hover = true) прослушивать все объекты hover и при событии moseover давать им класс active в котором уже будут нужные стили. Должно получится примерно так:

const hover = document.querySelectorAll(".hover");
   hover.forEach((item) => {
      if (window.matchMedia("(pointer: coarse)").matches && window.matchMedia("(hover: hover)").matches){
         item.addEventListener('mouseover', function (e) {
            item.classList.add("active");
         });
         item.addEventListener('mouseout', function (e) {
            item.classList.remove("active");
         });
         item.addEventListener('click', function(e){
            // код для клика на объект который сработает только на мобилке
         });
      } else if (window.matchMedia("(pointer: coarse)").matches && !window.matchMedia("(hover: hover)").matches) {
         item.addEventListener('click', function(e){
            // код для клика на объект который сработает только на мобилке
         });
      }
   });


И вот теперь собственно вопрос - как поведут себя устройства со стилусами (при наведении без касания) и будут ли они регистрировать событие mouseover?
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 1
Wacdis
@Wacdis
PHP, Python, GO, Rust, NodeJS, SOA/MSA
Стилус на телефоне и на планшетах - тач ивенты.
Стилус на графическом планшете - маус ивенты.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы