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

Question

[GAS-ART]

Я пытался разделить клики и событие 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?

Answer 1

[Ross Alex]

Стилус на телефоне и на планшетах - тач ивенты.
Стилус на графическом планшете - маус ивенты.

Comments

[GAS-ART]

Я пробовал заходить в эмуляцию на caniuse и скажем для galaxy Note

window.matchMedia("(hover: hover)").matches = true.

Т.е. получается, он будет регистрировать маус события, для стилуса, верно?

[Ross Alex]

GAS-ART, если стилус поднести близко и он покажет точку на экране, как на графическом планшете для дизайнера. А у iOS это будут тач ивенты, скорее всего.