Я пишу веб-сайт, который будет использоваться как с настольных, так и с планшетных компьютеров. Когда его посещают с настольного компьютера, я хочу, чтобы области экрана, на которые можно нажать, загорались с эффектами :hover
(другой цвет фона и т.д.) На планшете нет мыши, поэтому я не хочу никаких эффектов hover.
Проблема в том, что когда я касаюсь чего-то на планшете, браузер, очевидно, имеет что-то вроде "невидимого курсора мыши", который он перемещает в то место, где я коснулся, а затем оставляет его там - так что то, что я только что коснулся, загорается с эффектом hover, пока я не коснусь чего-то другого.
Как я могу получить эффект наведения при использовании мыши, но подавить его при использовании сенсорного экрана?
На случай, если кому-то пришло в голову предложить это, я не хочу использовать поиск пользовательских агентов. Одно и то же устройство может иметь и сенсорный экран, и мышь (возможно, сегодня это не так распространено, но в будущем будет гораздо чаще). Меня не интересует устройство, меня интересует, как оно используется в данный момент: мышь или сенсорный экран.
Я уже пытался зацепить события touchstart
, touchmove
и touchend
и вызвать preventDefault()
для всех них, что действительно подавляет "невидимый курсор мыши" некоторое время; но если я быстро тапаю взад-вперед между двумя разными элементами, после нескольких тапов он все равно начнет перемещать "курсор мыши" и зажигать эффекты наведения - похоже, что мой preventDefault
не всегда выполняется. Я не буду утомлять вас подробностями, если в этом нет необходимости - я даже не уверен, что это правильный подход; если у кого-то есть более простое решение, я весь внимание.
Edit: Это можно воспроизвести с помощью обычного CSS :hover
, но вот быстрый пример для справки.
Если вы наведете курсор на любое из полей, оно получит синий фон, что мне и нужно. Но если вы нажмете на любое из полей, оно также получит синий фон, что я и пытаюсь предотвратить.
Я также разместил пример здесь, который делает вышеописанное, а также подключает события мыши jQuery. Вы можете использовать его, чтобы увидеть, что события касания будут также вызывать mouseenter
, mousemove
и mouseleave
.