Я создал настраиваемую панель навигации, которая отлично работает. Моя проблема заключается в том, какую функциональность использовать в зависимости от устройства в действии. Для устройств с сенсорным экраном я хотел бы использовать функцию щелчка, а для устройств с клавиатурой наведение. У меня есть два сценария для событий наведения и нажатия для моей панели навигации.
Нажмите
<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>
Может ли кто-нибудь помочь, как я могу определить тип используемого устройства, а также как реализовать уже написанные скрипты под рукой?
Во-первых, вам нужен способ определить, является ли устройство мобильным:
function isMobile() {
return /Mobile/.test(navigator.userAgent); // do some research if "Mobile" always occurs in userAgent string if you want to be sure
}
Исходя из этого, вы можете выбрать свое мероприятие:
var event = isMobile() ? "click" : "mouseover";
Используйте переменную event
, чтобы прикрепить правильный слушатель. В ванильном JS вы бы сделали что-то вроде этого:
element.addEventListener(event, doStuff);
Я не использую jQuery, поэтому оставлю это на ваше усмотрение, но я думаю, что вы бы здесь искали метод .on()
- читать здесь
Возможный дубликат Как распознать сенсорные события с помощью jQuery в Safari для iPad? Является ли это возможным?