На основе обнаружения сенсорного экрана и клавиатуры реализовать различные функции

Я создал настраиваемую панель навигации, которая отлично работает. Моя проблема заключается в том, какую функциональность использовать в зависимости от устройства в действии. Для устройств с сенсорным экраном я хотел бы использовать функцию щелчка, а для устройств с клавиатурой наведение. У меня есть два сценария для событий наведения и нажатия для моей панели навигации.

Нажмите

<script>
$( '.tc-navigation > li' ).click(function() {
$(this).children('ul').toggleClass('toto');
$(this).siblings().children('ul').removeClass('toto');   
return false;
});

$(document).click(function() {
$('.tc-navigation > li > ul').removeClass('toto');
});
</script>

Для наведения

<script>
$( '.tc-navigation > li' ).hover(function() {
$(this).children('ul').toggleClass('toto');   
});
</script>

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

1
1
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. Во-первых, вам нужен способ определить, является ли устройство мобильным:

    function isMobile() {
      return /Mobile/.test(navigator.userAgent); // do some research if "Mobile" always occurs in userAgent string if you want to be sure
    }
    
  2. Исходя из этого, вы можете выбрать свое мероприятие:

    var event = isMobile() ? "click" : "mouseover";
    
  3. Используйте переменную event, чтобы прикрепить правильный слушатель. В ванильном JS вы бы сделали что-то вроде этого:

    element.addEventListener(event, doStuff);
    

Я не использую jQuery, поэтому оставлю это на ваше усмотрение, но я думаю, что вы бы здесь искали метод .on() - читать здесь

Другие вопросы по теме