Solução melhorada
Primeiro, fui com a abordagem de Rich Bradshaw , mas depois começaram a aparecer problemas. Ao fazer o e.preventDefault () no evento 'touchstart' , a página não rola mais e, nem a pressão prolongada é capaz de disparar o menu de opções, nem o zoom duplo clique é capaz de concluir a execução.
Uma solução poderia ser descobrir qual evento está sendo chamado e apenas e.preventDefault () no último, 'touchend' . Como o 'touchmove' do scroll vem antes do 'touchend', ele permanece como padrão e o 'click' também é impedido, pois vem com as senhas na cadeia de eventos aplicadas ao dispositivo móvel, da seguinte forma:
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
Mas então, quando o menu de opções aparece, ele não aciona mais o 'toque' responsável por alternar entre a classe e, da próxima vez, o comportamento do foco será o contrário, totalmente confuso.
Uma solução seria, novamente, descobrir condicionalmente em qual evento estamos, ou apenas realizar eventos separados, e usar addClass () e removeClass () respectivamente em 'touchstart' e 'touchend' , garantindo que ele sempre comece e termine por respectivamente adicionando e removendo em vez de decidir condicionalmente. Para finalizar, também vincularemos o retorno de chamada de remoção ao tipo de evento 'focusout' , permanecendo responsável por limpar a classe de foco de qualquer link que possa permanecer ativada e nunca revisitada novamente, da seguinte forma:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
Atenção: Alguns erros ainda ocorrem nas duas soluções anteriores e, também pense (não testado), o zoom duplo clique também falha.
Arrumado e esperançosamente livre de erros (não :)) Solução Javascript
Agora , por um segundo, mais limpo, organizado e responsivo, use apenas javascript (sem combinação entre a classe .hover e pseudo: hover) e de onde você pode chamar diretamente seu comportamento do ajax no evento universal (móvel e desktop) 'click' , Encontrei uma pergunta muito bem respondida, da qual finalmente entendi como misturar eventos de toque e mouse sem vários retornos de chamada de eventos, inevitavelmente alterando os eventos uns dos outros na cadeia de eventos. Aqui está como:
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});