Различают только сенсорные и сенсорные устройства - PullRequest
Новая
       37

Различают только сенсорные и сенсорные устройства

0 голосов
/ 19 февраля 2019

Сейчас я работаю над частью проекта, которая поддерживает перетаскивание.Посмотрите на изображение для уточнения:

picture

Даже если это немецкий, я думаю, это просто: пользователь может перетащить синие прямоугольники сверху, говоря: «Verfügbare Empfänger» насерые области ниже.Это работает просто отлично.

На мобильных устройствах я просто удалил перетаскивание и серые области и могу добавить синие поля, нажав на них.

Теперь для актуальной проблемы: вЧтобы обнаружить касание, я использовал следующий метод javascript, который я выкопал где-то в StackOverflow: 

if (window.matchMedia("(any-pointer: coarse)").matches) {
    vm.touchScreen = true;
}

В зависимости от значения vm.touchScreen, перетаскивание включается / отключается.Тем не менее, у одного из наших клиентов есть устройство, которое поддерживает ОБА сенсорный экран и мышь.Как вы можете себе представить, поскольку в этом случае сенсорный экран имеет значение true, пользователь не может использовать перетаскивание, даже если у него есть мышь.

Поэтому я ищу что-то подобное: 

getInputType=function(){
    if(somecheck1)return 1;/Touch only
    if(somecheck2)return 2;//Mouse only
    if(somecheck3)return 3;//Mouse and Touch
}

У меня уже есть какое-то функциональное решение.Тем не менее, он опирается на то, что пользователь вызывает mouseEvents и touchEvents еще до того, как отобразить ту часть, которую я показал вам на картинке.Путем запуска мышью или касанием перед ним устанавливаются два логических значения: hasMouse и hasTouch.Естественно, это не работает, если пользователь обновляет страницу, на которой деталь перетаскивается сразу же.

Я был бы рад, если бы кто-нибудь мог мне помочь или дать мне ссылку на правильное решение!

С наилучшими пожеланиями

1 Ответ

0 голосов
/ 23 февраля 2019

Хорошо, моя ошибка.Я попробовал другой подход поиска в Google, и таким образом я нашел ответ:

Как определить, поддерживает ли устройство поддержку мыши?

Чтобы подвести итог, этоэто код, который я использую: 

if (window.matchMedia("(any-pointer: coarse)").matches) {
    hasTouch = true;
}
if (matchMedia('(pointer:fine)').matches) {
    hasMouse = true;
}

Таким образом, вы можете обнаружить, если:

- Устройство имеет только сенсорный доступ (hasTouch &&! hasMouse)

- Устройствоимеет только мышь (! hasTouch && hasMouse)

-У устройства есть сенсорная и мышь (hasTouch && hasMouse)

...