CSS: зависание /: фокус против события click on (мобильные) сенсорные устройства

Часто я нахожусь в ситуациях, когда мне нужно отображать меню при наведении, а меню мобильных устройств должно открываться по щелчку. Теперь, например, рассмотрим следующий пример:

.btn { width: 200px; background-color: #333; color: white; padding: 10px; } .menu { display: none; padding: 15px; } .btn:hover .menu { display: block; } .btn:focus .menu { display: block; } 
 <div class="btn"> Button <div class="menu">I am menu</div> </div> 

Теперь это автоматически работает на мобильных устройствах, потому что состояние зависания является липким на сенсорных устройствах. Но этот хак применим ко всем сенсорным устройствам? То есть, стоит ли риск? Будет ли какое-то сенсорное устройство не обладать зависанием? Очевидно, альтернативой является назначение событий touch / click с помощью JavaScript на сенсорных устройствах, но это кажется лишним, потому что я не видел никаких сенсорных устройств, у которых нет липких состояний зависания?

Поэтому мой вопрос:

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

Solutions Collecting From Web of "CSS: зависание /: фокус против события click on (мобильные) сенсорные устройства"

Я бы сказал, что все в порядке, чтобы просто придерживаться css для большинства зависаний, если вы в порядке с меню или закрытием, когда пользователь нажимает на отдельный элемент.

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

Наверное, безопасно!

По моему опыту, на самом деле это не хак, а скорее способ имитировать события наведения с помощью чистого CSS. В основном я использую :hover/:focus для таких проблем, потому что

1.) Они надежны.

2.) Дешево (в терминах kb).

Для включения правила для полностью функционирующего меню требуется только 2 правила и внешний HTTP-запрос, но несколько строк JavaScript (или, ужас, jQuery), чтобы создать одно и то же.

Что я сказал в комментариях, вы должны или могли бы применять атрибут tabindex чтобы заставить элемент быть ориентируемым, например:

 <div class="non-focusable-clickable-hover-element" tabindex="-1">I cannot be focussed<div> <div class="focusable-hover-element" tabindex="1">I can be focussed<div>