Dalsze ulepszone rozwiązanie
Najpierw poszedłem z podejściem Richa Bradshawa , ale potem zaczęły pojawiać się problemy. Wykonując e.preventDefault () w zdarzeniu „touchstart” , strona nie jest już przewijana i ani długie naciśnięcie nie jest w stanie uruchomić menu opcji, ani podwójne kliknięcie powiększenia nie jest w stanie zakończyć wykonywania.
Rozwiązaniem może być ustalenie, które zdarzenie jest wywoływane i po prostu e.preventDefault () w późniejszym, „touchend” . Ponieważ „ruch dotykowy” przewijania występuje przed „dotknięciem” , pozostaje on domyślnie, a „kliknięcie” jest również zapobiegane, ponieważ występuje po słowie w łańcuchu zdarzeń stosowanym na telefonie komórkowym, na przykład:
// 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');
});
Ale potem, gdy pojawi się menu opcji, nie uruchamia już „touchchend” odpowiedzialnego za wyłączenie klasy, a następnym razem zachowanie najechania kursorem będzie odwrotne , całkowicie pomieszane.
Rozwiązaniem byłoby więc ponownie warunkowe ustalenie, w którym zdarzeniu się znajdujemy, lub po prostu zrobienie oddzielnych, i użycie addClass () i removeClass () odpowiednio na 'touchstart' i 'touchend' , upewniając się, że zawsze zaczyna się i kończy odpowiednio dodawanie i usuwanie zamiast warunkowego decydowania o tym. Na koniec powiążemy również usuwające wywołanie zwrotne z typem zdarzenia „focusout” , pozostając odpowiedzialnym za wyczyszczenie wszystkich klas linków, które mogą pozostać włączone i nigdy więcej nie wracać, na przykład:
$('.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');
});
Uwaga: niektóre błędy nadal występują w dwóch poprzednich rozwiązaniach, a także myślę (nie testowano), powiększanie dwukrotnym kliknięciem nadal nie działa.
Schludne i miejmy nadzieję wolne od błędów (nie :)) rozwiązanie JavaScript
Teraz , przez sekundę, czystsze, uporządkowane i responsywne podejście, po prostu używając javascript (bez mieszania klasy .hover i pseudo: hover) i skąd możesz bezpośrednio wywołać swoje zachowanie Ajax w uniwersalnym (mobilnym i stacjonarnym) zdarzeniu „kliknięcie” , Znalazłem dość dobrze udzielone pytanie, z którego w końcu zrozumiałem, jak mogę mieszać zdarzenia dotyku i myszy bez kilku wywołań zwrotnych zdarzeń nieuchronnie zmieniających się nawzajem w łańcuchu zdarzeń. Oto jak:
$('.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!
}
});