Отключение эффектов наведения на мобильных браузерах

Я пишу веб-сайт, который будет использоваться как с настольных, так и с планшетных компьютеров. Когда его посещают с настольного компьютера, я хочу, чтобы области экрана, на которые можно нажать, загорались с эффектами :hover (другой цвет фона и т.д.) На планшете нет мыши, поэтому я не хочу никаких эффектов hover.

Проблема в том, что когда я касаюсь чего-то на планшете, браузер, очевидно, имеет что-то вроде "невидимого курсора мыши", который он перемещает в то место, где я коснулся, а затем оставляет его там - так что то, что я только что коснулся, загорается с эффектом hover, пока я не коснусь чего-то другого.

Как я могу получить эффект наведения при использовании мыши, но подавить его при использовании сенсорного экрана?

На случай, если кому-то пришло в голову предложить это, я не хочу использовать поиск пользовательских агентов. Одно и то же устройство может иметь и сенсорный экран, и мышь (возможно, сегодня это не так распространено, но в будущем будет гораздо чаще). Меня не интересует устройство, меня интересует, как оно используется в данный момент: мышь или сенсорный экран.

Я уже пытался зацепить события touchstart, touchmove и touchend и вызвать preventDefault() для всех них, что действительно подавляет "невидимый курсор мыши" некоторое время; но если я быстро тапаю взад-вперед между двумя разными элементами, после нескольких тапов он все равно начнет перемещать "курсор мыши" и зажигать эффекты наведения - похоже, что мой preventDefault не всегда выполняется. Я не буду утомлять вас подробностями, если в этом нет необходимости - я даже не уверен, что это правильный подход; если у кого-то есть более простое решение, я весь внимание.


Edit: Это можно воспроизвести с помощью обычного CSS :hover, но вот быстрый пример для справки.


Если вы наведете курсор на любое из полей, оно получит синий фон, что мне и нужно. Но если вы нажмете на любое из полей, оно также получит синий фон, что я и пытаюсь предотвратить.

Я также разместил пример здесь, который делает вышеописанное, а также подключает события мыши jQuery. Вы можете использовать его, чтобы увидеть, что события касания будут также вызывать mouseenter, mousemove и mouseleave.

111
задан Joe White 28 November 2011 в 12:58
поделиться