Não está totalmente claro qual é a sua pergunta, mas se você deseja apenas eliminar o clique duplo, mantendo o efeito de foco do mouse, meu conselho é:
- Adicione efeitos de foco em
touchstart
e mouseenter
.
- Remover efeitos de foco em
mouseleave
, touchmove
e click
.
fundo
Para simular um mouse, navegadores como o Webkit mobile acionam os seguintes eventos se um usuário tocar e soltar um dedo na tela de toque (como o iPad) (fonte: Touch And Mouse no html5rocks.com):
touchstart
touchmove
touchend
- Atraso de 300 ms, em que o navegador garante um toque único, não um toque duplo
mouseover
mouseenter
- Nota : Se um
mouseover
, mouseenter
ou mousemove
evento muda o conteúdo da página, os seguintes eventos não são disparados.
mousemove
mousedown
mouseup
click
Não parece possível simplesmente dizer ao navegador da web para pular os eventos do mouse.
O que é pior: se um evento de mouseover altera o conteúdo da página, o evento de clique nunca é acionado, conforme explicado no Guia de Conteúdo da Web do Safari - Manipulação de Eventos , em particular a figura 6.4 em Eventos com um dedo . O que exatamente é uma "alteração de conteúdo" depende do navegador e da versão. Descobri que, para o iOS 7.0, uma alteração na cor do plano de fundo não é (ou não é mais?).
Solução explicada
Para recapitular:
- Adicione efeitos de foco instantâneo
touchstart
emouseenter
.
- Remova os efeitos de foco em
mouseleave
, touchmove
e click
.
Observe que não há ação no touchend
!
Isso claramente funciona para eventos de mouse: mouseenter
e mouseleave
(versões ligeiramente aprimoradas de mouseover
e mouseout
) são acionadas, e adicione e remova o foco.
Se o usuário realmente for click
um link, o efeito de foco instantâneo também será removido. Isso garante que ele seja removido se o usuário pressionar o botão Voltar no navegador da web.
Isso também funciona para eventos de toque: touchstart
o efeito de foco é adicionado. É '' 'não' '' removido em touchend
. Ele é adicionado novamente mouseenter
e, como isso não causa alterações no conteúdo (já foi adicionado), o click
evento também é acionado e o link é seguido sem a necessidade do usuário clicar novamente!
Os 300 ms de atraso que um navegador possui entre um touchstart
evento e click
são realmente utilizados porque o efeito de foco será mostrado durante esse curto período de tempo.
Se o usuário decidir cancelar o clique, um movimento do dedo fará o mesmo normalmente. Normalmente, isso é um problema, pois nenhum mouseleave
evento é disparado e o efeito de foco permanece no lugar. Felizmente, isso pode ser facilmente corrigido removendo o efeito de foco em touchmove
.
É isso aí!
Observe que é possível remover o atraso de 300ms, por exemplo, usando a biblioteca FastClick , mas isso está fora do escopo desta pergunta.
Soluções alternativas
Encontrei os seguintes problemas com as seguintes alternativas:
- detecção de navegador: extremamente propenso a erros. Assume que um dispositivo possui mouse ou toque, enquanto uma combinação de ambos se tornará cada vez mais comum quando o toque for prolifirado.
- Detecção de mídia CSS: a única solução somente CSS que eu conheço. Ainda propenso a erros e ainda pressupõe que um dispositivo tenha mouse ou toque, enquanto ambos são possíveis.
- Emule o evento click em
touchend
: Isso seguirá incorretamente o link, mesmo se o usuário quiser apenas rolar ou ampliar, sem a intenção de realmente clicar no link.
- Use uma variável para suprimir os eventos do mouse: define uma variável
touchend
usada como condição if nos eventos subsequentes do mouse para impedir alterações de estado naquele momento. A variável é redefinida no evento click. Esta é uma solução decente se você realmente não deseja um efeito de foco instantâneo nas interfaces de toque. Infelizmente, isso não funciona se um touchend
é acionado por outro motivo e nenhum evento de clique é acionado (por exemplo, o usuário rolou ou aumentou o zoom) e, posteriormente, tenta seguir o link com um mouse (ou seja, em um dispositivo com interface de mouse e touch) )
Leitura adicional
Consulte também o problema de clique duplo do iPad / iPhone e Desativar efeitos de foco instantâneo em navegadores móveis .