Как запустить сенсорный экран при загрузке страницы - PullRequest
Новая
       16

Как запустить сенсорный экран при загрузке страницы

0 голосов
/ 24 марта 2020

У меня есть меню, которое использует указатель мыши для отображения подменю на рабочем столе. Похоже, что для сенсорных устройств фокус меню не инициируется до тех пор, пока не будет проведено касание (фокусировка) другого элемента. Когда я касаюсь пункта меню, чтобы отобразить подменю, пункт меню показывает выбранное, но подменю не отображается. Если я уберу фокус с прикосновения к другому элементу страницы, например к полю изображения или формы, а затем коснусь элемента меню во второй раз, подменю будет работать, как и ожидалось. Это также будет работать, если я сосредоточусь сначала на элементе формы, а затем на подменю. У меня есть: hover,: focus, и: active все в моем CSS, но, кажется, игнорируется первый фокус / active. Есть ли способ JQuery, чтобы заставить устройство с сенсорным экраном инициировать фокусировку, как только страница загружается? Есть ли другое решение этой проблемы?

1 Ответ

0 голосов
/ 24 марта 2020

По моему опыту, в зависимости от css статуса недостаточно, чтобы делать то, что вы ищете здесь. Он будет работать только на настольных компьютерах или только на мобильных устройствах. Вместо этого я бы использовал для этого javascript событие ontouchstart (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events).

Предполагая, что ваш css выглядит примерно так: 

.your-hoverable-class:hover  .submenu{
    display: block;
}

Вы можно переместить это: состояние наведения на собственный класс (.is-hovered), например: 

.your-hoverable-class.is-hovered .submenu{
    display: block;
}

Затем вы можете выполнить переключение состояния следующим образом: Javascript (ES6) 

const hoverableElem = document.querySelector('.your-hoverable-class');
hoverableElem.addEventListener('touchstart',(event)=>{
    event.target.classList.toggle('is-hovered')
});

Теперь пользователь может «нажать» на этот элемент, если он использует мобильное устройство. : hover css работает достаточно хорошо с мышью, поэтому вы можете оставить: hover включенным, как и он. В противном случае вы можете просто использовать события onmouseover и onmouseout, как указано выше, если вы хотите придерживаться чистого javascript решения.

...