如何在页面加载时启动触摸屏

Question

我有一个菜单，该菜单使用鼠标悬停在桌面上显示子菜单。似乎在触摸屏设备上，只有先触摸另一个元素（聚焦）之后，菜单焦点才会被启动。当我触摸菜单项以显示子菜单时，菜单项显示为选中状态，但子菜单不显示。如果我通过触摸另一个页面元素（例如图像或表单域）来取消焦点，然后再次触摸菜单项，则该子菜单将按预期工作。如果我先关注表单元素，然后再关注子菜单，它也将起作用。我的CSS中都有：hover，：focus和：active，但是似乎忽略了第一个focus / active。是否存在JQuery方法，以在页面加载后立即强制触摸屏设备启动焦点？是否有解决此问题的另一种方法？

Answer 1

根据我的经验，仅凭CSS的状态不足以完成您在这里想要的工作。它只能在台式机或移动设备上使用。相反，我将为此使用javascript ontouchstart事件（https://developer.mozilla.org/en-US/docs/Web/API/Touch_events）。

假设您的CSS看起来像这样：

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

您可以将：hover状态移动到其自己的类（.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的切换。否则，如果您要坚持使用纯JavaScript解决方案，则可以只使用上述的onmouseover和onmouseout事件。