Soluzione ulteriormente migliorata
All'inizio sono andato con l' approccio di Rich Bradshaw , ma poi sono iniziati i problemi. Facendo l'e.preventDefault () su 'TouchStart' evento, la pagina scorre più e, né la pressione prolungata è in grado di sparare il menu delle opzioni né doppio click zoom è in grado di finire l'esecuzione.
Una soluzione potrebbe essere scoprire quale evento viene chiamato e solo e.preventDefault () nell'ultimo , "touchend" . Poiché il "touchmove" di scorrimento viene prima di "touchend" , rimane come predefinito e anche il "clic" viene impedito poiché si trova dopo le parole nella catena di eventi applicata al dispositivo mobile, in questo modo:
// 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');
});
Ma poi, quando viene visualizzato il menu delle opzioni, non attiva più "touchend" responsabile della disattivazione della classe e la prossima volta il comportamento del passaggio del mouse sarà il contrario, completamente confuso.
Una soluzione quindi sarebbe, ancora una volta, scoprire in modo condizionale in quale evento ci troviamo, o semplicemente eseguirne di separati, e utilizzare rispettivamente addClass () e removeClass () su 'touchstart' e 'touchend' , assicurandoti che inizi e finisca sempre per rispettivamente aggiungendo e rimuovendo invece di decidere in modo condizionale su di esso. Per finire vincoleremo anche la richiamata di rimozione al tipo di evento 'focusout' , rimanendo responsabili della cancellazione della classe hover di qualsiasi collegamento che potrebbe rimanere attiva e non essere mai più rivisitata, in questo modo:
$('.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');
});
Attenzione: Alcuni bug si verificano ancora nelle due soluzioni precedenti e, anche pensare (non testato), lo zoom con doppio clic non riesce ancora.
Soluzione Javascript ordinata e, si spera, priva di bug (non :))
Ora , per un secondo approccio, più pulito, ordinato e reattivo, usando semplicemente javascript (nessun mix tra classe .hover e pseudo: hover) e da dove potresti chiamare direttamente il tuo comportamento ajax sull'evento 'clic' universale (mobile e desktop) , Ho trovato una domanda abbastanza ben risolta da cui ho finalmente capito come potevo mescolare gli eventi di tocco e mouse insieme senza che diversi callback di eventi inevitabilmente cambiassero uno con l'altro nella catena degli eventi. Ecco come:
$('.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!
}
});