Estou escrevendo um site que deve ser usado em desktops e tablets. Quando ele está sendo visitado a partir de um desktop, quero que as áreas clicáveis da tela se iluminem com:hover
efeitos (cor de fundo diferente, etc.) Com um tablet, não há mouse, então não quero nenhum efeito de foco.
O problema é que, quando toco em algo no tablet, o navegador evidentemente tem algum tipo de "cursor invisível do mouse" que se move para o local onde toquei e o deixa lá - então o que acabei de tocar acende-se com um efeito de foco até que eu toque em outra coisa.
Como posso obter os efeitos de foco quando estou usando o mouse, mas suprimi-los quando estou usando a tela sensível ao toque?
Caso alguém esteja pensando em sugerir isso, não quero usar a detecção de user agent. O mesmo dispositivo pode ter uma tela sensível ao toque e um mouse (talvez não tão comum hoje, mas muito mais no futuro). Não estou interessado no dispositivo, estou interessado em como ele está sendo usado atualmente: mouse ou touchscreen.
Eu já tentei ligar os touchstart
, touchmove
, e touchend
eventos e chamando preventDefault()
em todos eles, o que faz suprimir o "cursor do mouse invisível" por algum tempo; mas se eu tocar rapidamente para frente e para trás entre dois elementos diferentes, depois de alguns toques, ele começará a mover o "cursor do mouse" e acender os efeitos de foco de qualquer maneira - é como se o meu preventDefault
nem sempre fosse respeitado. Não vou aborrecê-lo com os detalhes, a menos que seja necessário - nem tenho certeza se essa é a abordagem certa a se tomar; se alguém tem uma solução mais simples, sou todo ouvidos.
Editar: isso pode ser reproduzido com CSS padrão do bog :hover
, mas aqui está uma reprodução rápida para referência.
<style>
.box { border: 1px solid black; width: 150px; height: 150px; }
.box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>
Se você passar o mouse sobre qualquer uma das caixas, terá um fundo azul, o que eu desejo. Mas se você tocar em qualquer uma das caixas, também obterá um fundo azul, que é o que estou tentando evitar.
Eu também postei um exemplo aqui que faz o acima e também engancha os eventos de mouse do jQuery. Você pode usá-lo para ver que a TAP eventos também irá disparar mouseenter
, mousemove
e mouseleave
.