Weitere verbesserte Lösung
Zuerst habe ich mich für den Ansatz von Rich Bradshaw entschieden , aber dann traten Probleme auf. Durch Ausführen von e.preventDefault () beim 'Touchstart'- Ereignis wird die Seite nicht mehr gescrollt, und weder das lange Drücken des Optionsmenüs noch das Doppelklicken des Zooms können die Ausführung beenden.
Eine Lösung könnte darin bestehen, herauszufinden, welches Ereignis aufgerufen wird, und nur e.preventDefault () im späteren 'touchend' . Da der 'touchmove' von scroll vor 'touchend' steht , bleibt er standardmäßig erhalten, und 'click' wird ebenfalls verhindert, da es sich um Nachwörter in der Ereigniskette handelt, die auf Mobilgeräte angewendet werden, wie folgt:
// 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');
});
Wenn dann das Optionsmenü angezeigt wird, wird kein "Touchend" mehr ausgelöst, das für das Ausschalten der Klasse verantwortlich ist, und beim nächsten Mal ist das Schwebeverhalten umgekehrt, völlig durcheinander.
Eine Lösung wäre dann wiederum, unter bestimmten Bedingungen herauszufinden, in welchem Ereignis wir uns befinden, oder nur separate Ereignisse durchzuführen und addClass () bzw. removeClass () für 'touchstart' und 'touchend' zu verwenden , um sicherzustellen, dass es immer beginnt und endet jeweils hinzufügen und entfernen, anstatt sich bedingt dafür zu entscheiden. Zum Abschluss binden wir den Rückruf zum Entfernen auch an den Ereignistyp "focusout" und bleiben dafür verantwortlich , die Schwebeklasse eines Links zu löschen, die möglicherweise aktiviert bleibt und nie wieder besucht wird, wie folgt :
$('.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');
});
Achtung: Einige Fehler treten immer noch in den beiden vorherigen Lösungen auf, und denken Sie (nicht getestet), dass der Doppelklick-Zoom auch immer noch fehlschlägt.
Ordentliche und hoffentlich fehlerfreie (nicht :)) Javascript-Lösung
Nun , für eine zweite, sauberer, aufgeräumter und reaktions Ansatz nur mit Hilfe von Javascript (kein zwischen .hover Klasse und Pseudo mischen: Hover) und von wo aus Sie direkt Ihr Ajax - Verhalten auf der universellen nennen könnte (mobile und Desktop) ‚Klick‘ Event Ich habe eine ziemlich gut beantwortete Frage gefunden, anhand derer ich endlich verstanden habe, wie ich Berührungs- und Mausereignisse miteinander mischen kann, ohne dass mehrere Ereignisrückrufe zwangsläufig die Ereignisse in der Ereigniskette ändern. Hier ist wie:
$('.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!
}
});