Я пишу веб-сайт, предназначенный для использования как с настольных компьютеров, так и с планшетов. Когда его посещают с рабочего стола, я хочу, чтобы интерактивные области экрана подсвечивались :hover
эффектами (разным цветом фона и т. Д.). На планшете нет мыши, поэтому я не хочу никаких эффектов наведения.
Проблема в том, что когда я нажимаю что-то на планшете, в браузере, очевидно, есть какой-то «невидимый курсор мыши», который перемещается в место, которое я коснулся, а затем оставляет его там, поэтому то, что я только что коснулся, загорается эффект наведения, пока я не коснусь чего-нибудь еще.
Как мне получить эффекты наведения, когда я использую мышь, но подавить их, когда я использую сенсорный экран?
Если кто-то думал об этом, я не хочу использовать сниффинг пользовательского агента. Одно и то же устройство может иметь как сенсорный экран, так и мышь (возможно, сегодня это не так распространено, но в будущем станет еще больше). Устройство меня не интересует, меня интересует, как оно сейчас используется: мышь или тачскрин.
Я уже пытался зацепить touchstart
, touchmove
и touchend
событие , и призывая preventDefault()
на всех из них, что делает подавляющий «невидимый курсор мыши» некоторое время; но если я быстро нажимаю вперед и назад между двумя разными элементами, после нескольких нажатий он все равно начнет перемещать «курсор мыши» и зажигать эффекты наведения - это как будто меня preventDefault
не всегда уважают. Я не буду утомлять вас подробностями, если в этом нет необходимости - я даже не уверен, что это правильный подход; если у кого есть исправление попроще, я весь уши.
Изменить: это можно воспроизвести с помощью стандартного CSS :hover
, но вот краткое воспроизведение для справки.
<style>
.box { border: 1px solid black; width: 150px; height: 150px; }
.box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>
Если вы наведете курсор мыши на любой из полей, он получит синий фон, который я хочу. Но если вы нажмете на любой из полей, он также получит синий фон, что я пытаюсь предотвратить.
Я также отправил образец здесь , что делает выше , а также перехватывает события мыши JQuery в. Вы можете использовать его, чтобы увидеть, что события касания также срабатывают mouseenter
, mousemove
и mouseleave
.