Mam kilka stron internetowych, które zbudowałem kilka razy temu, które używają zdarzeń myszy jQuery ... Właśnie dostałem iPada i zauważyłem, że wszystkie zdarzenia myszy nad kursorem są tłumaczone na kliknięcia ... więc na przykład muszę zrobić dwa kliknięcia zamiast jednego .. (pierwsze najechanie kursorem, a nie faktyczne kliknięcie)
czy istnieje rozwiązanie gotowe do rozwiązania tego problemu? może komenda jquery, której powinienem użyć zamiast przesuwania kursora / wyjścia itp .. dzięki!
Odpowiedzi:
Nie testowałem tego w pełni, ale ponieważ iOS uruchamia zdarzenia dotykowe, może to zadziałać, zakładając, że jesteś w ustawieniu jQuery.
Chodzi o to, że Mobile WebKit uruchamia
touchend
zdarzenie na końcu dotknięcia, więc nasłuchujemy tego, a następnie przekierowujemy przeglądarkę, gdy tylkotouchend
zdarzenie zostanie uruchomione na łączu.źródło
.on
preferowane jest.live
. Po przeczytaniu tej odpowiedzi stwierdziłem, że zmiana kodu na$('a').on('click touchend', function(e) {...})
działa znakomicie.target="_blank"
nim, otworzy się w tym samym oknie ORAZ w nowym oknie.Nie jest do końca jasne, o co chodzi, ale jeśli chcesz po prostu wyeliminować podwójne kliknięcie, zachowując efekt najechania myszą, radzę:
touchstart
imouseenter
.mouseleave
,touchmove
iclick
.tło
Aby zasymulować mysz, przeglądarki, takie jak Webkit mobile, uruchamiają następujące zdarzenia, jeśli użytkownik dotknie i puści palec na ekranie dotykowym (takim jak iPad) (źródło: Touch And Mouse na html5rocks.com):
touchstart
touchmove
touchend
mouseover
mouseenter
mouseover
,mouseenter
czymousemove
zdarzenie zmienia zawartość strony, następujące zdarzenia nie są wypalane.mousemove
mousedown
mouseup
click
Wydaje się, że nie jest możliwe po prostu nakazanie przeglądarce pominięcia zdarzeń myszy.
Co gorsza, jeśli zdarzenie najechania kursorem myszy zmieni zawartość strony, zdarzenie kliknięcia nigdy nie zostanie uruchomione, jak wyjaśniono w Przewodniku po treściach internetowych Safari - Obsługa zdarzeń , w szczególności na rysunku 6.4 w Zdarzeniach jednym palcem . Czym dokładnie jest „zmiana treści”, zależy od przeglądarki i wersji. Odkryłem, że w iOS 7.0 zmiana koloru tła nie jest (lub już nie?) Zmianą treści.
Wyjaśnienie rozwiązania
Przypomnę:
touchstart
imouseenter
.mouseleave
,touchmove
iclick
.Zauważ, że nie ma żadnej akcji
touchend
!To wyraźnie działa w przypadku zdarzeń myszy:
mouseenter
imouseleave
(nieco ulepszone wersjemouseover
imouseout
) są uruchamiane i dodają i usuwają dymek.Jeśli użytkownik faktycznie
click
linkiem, efekt najechania kursorem jest również usuwany. Zapewnia to, że zostanie usunięty, jeśli użytkownik naciśnie przycisk Wstecz w przeglądarce internetowej.Działa to również w przypadku zdarzeń dotykowych:
touchstart
dodawany jest efekt najechania kursorem. To jest '' 'nie' '' usuniętetouchend
. Jest on ponownie dodawanymouseenter
, a ponieważ nie powoduje to żadnych zmian treści (zostało już dodane),click
zdarzenie jest również uruchamiane, a odsyłacz jest śledzony bez konieczności ponownego klikania przez użytkownika!300 ms opóźnienia, które przeglądarka ma między
touchstart
zdarzeniem iclick
jest faktycznie dobrze wykorzystywane, ponieważ efekt najechania kursorem będzie wyświetlany w tym krótkim czasie.Jeśli użytkownik zdecyduje się anulować kliknięcie, ruch palcem zrobi to normalnie. Zwykle jest to problem, ponieważ nie
mouseleave
zdarzenie jest uruchamiane, a efekt zawisu pozostaje na miejscu. Na szczęście można to łatwo naprawić, usuwając efekt najechania natouchmove
.Otóż to!
Zwróć uwagę, że można usunąć opóźnienie 300 ms, na przykład za pomocą biblioteki FastClick , ale jest to poza zakresem tego pytania.
Alternatywne rozwiązania
Znalazłem następujące problemy z następującymi alternatywami:
touchend
: Spowoduje to niepoprawne podążanie za linkiem, nawet jeśli użytkownik chciał tylko przewinąć lub powiększyć, bez zamiaru kliknięcia łącza.touchend
która jest używana jako warunek jeśli w kolejnych zdarzeniach myszy, aby zapobiec zmianom stanu w tym momencie. Zmienna jest resetowana w przypadku kliknięcia. To przyzwoite rozwiązanie, jeśli naprawdę nie chcesz efektu najechania na interfejsy dotykowe. Niestety, to nie działa, jeśli atouchend
jest uruchamiane z innego powodu i nie jest wywoływane żadne zdarzenie kliknięcia (np. Użytkownik przewinął lub powiększył), a następnie próbuje podążać za linkiem za pomocą myszy (tj. Na urządzeniu z myszą i interfejsem dotykowym ).Dalsze czytanie
mouseover
lubmousemove
.Zobacz także Problem podwójnego kliknięcia iPada / iPhone'a i Wyłącz efekty najechania kursorem w przeglądarkach mobilnych .
źródło
Wygląda na to, że istnieje rozwiązanie CSS. Powodem, dla którego Safari czeka na drugie dotknięcie, jest obraz tła (lub elementy), które zwykle przypisujesz do zdarzenia: hover. Jeśli nie ma żadnego do pokazania - nie będziesz mieć żadnych problemów. Rozwiązaniem jest docelowa platforma iOS z dodatkowym plikiem CSS (lub stylem w przypadku podejścia JS), który zastępuje: najedź na tło, aby dziedziczyć i ukryć elementy, które chcesz wyświetlić po najechaniu myszą:
Oto przykład CSS i HTML - blok produktu z oznaczoną gwiazdką etykietą po najechaniu myszą:
HTML:
CSS:
Rozwiązanie (dodatkowy CSS):
źródło
Nie ma potrzeby zbytniego komplikowania.
źródło
To, co zadziałało, to to, co inni tutaj już powiedzieli:
Nie pokazuj / nie ukrywaj elementów po najechaniu myszą lub najechaniu myszą (tak jest w moim przypadku).
Oto, co mówi Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):
Możesz więc użyć rozwiązania @ woop: wykryć userAgent, sprawdź, czy jest to i urządzenie iOS, a następnie powiązaj zdarzenie. Skończyło się na tym, że użyłem tej techniki, ponieważ odpowiada ona moim potrzebom i ma większy sens, aby nie wiązać zdarzeń najechania kursorem, gdy tego nie chcesz.
Ale ... jeśli nie chcesz zadzierać z userAgents i nadal ukrywać / pokazywać elementy na hover / mousemove, dowiedziałem się, że możesz to zrobić, używając natywnego javascript, na przykład:
To zadziała w wersji na komputery stacjonarne i nic nie da w wersji mobilnej.
A dla trochę większej kompatybilności ...
źródło
Rozwiązanie cduruk było dość skuteczne, ale spowodowało problemy w kilku częściach mojej witryny. Ponieważ używałem już jQuery do dodawania klasy CSS hover, najłatwiejszym rozwiązaniem było po prostu nie dodawanie klasy CSS na urządzeniach mobilnych (a dokładniej, aby dodać ją TYLKO, gdy NIE na urządzeniu mobilnym).
Oto ogólny pomysł:
* kod zredukowany w celach ilustracyjnych
źródło
Myślę, że mądrze byłoby spróbować
mouseenter
zamiast tegomouseover
. To jest to, co jest używane wewnętrznie podczas wiązania.hover(fn,fn)
i jest ogólnie tym, czego chcesz.źródło
Miałem następujące problemy z istniejącymi rozwiązaniami i znalazłem coś, co wydaje się rozwiązać je wszystkie. Zakłada się, że celujesz w coś w przeglądarce, na różnych urządzeniach i nie chcesz wąchać urządzenia.
Problemy, które to rozwiązuje
Używając tylko
touchstart
lubtouchend
:Wyzwalanie
mouseover
zdarzeń natouchstart
imouseout
natouchmove
mniej poważne konsekwencje, ale nie kolidować z zachowaniem zwykłej przeglądarki, na przykład:touchstart
jak znak amouseover
, który jestmouseout
wyświetlany w następnymtouchstart
. Dlatego jednym ze sposobów wyświetlenia zawartości po najechaniu myszą w systemie Android jest dotknięcie obszaru zainteresowania i poruszenie palcem, lekko przewijając stronę. Traktowanietouchmove
jakomouseout
zepsuje to.Rozwiązanie
Teoretycznie możesz po prostu dodać flagę
touchmove
, ale iPhone'y wyzwalają ruch dotykowy, nawet jeśli nie ma ruchu. W teorii można po prostu porównywaćtouchstart
itouchend
zdarzeniapageX
ipageY
ale na iPhone, nie matouchend
pageX
lubpageY
.Więc niestety, aby objąć wszystkie podstawy, kończy się to trochę bardziej skomplikowane.
Teoretycznie istnieją sposoby na uzyskanie dokładnego czasu używanego do długiego naciśnięcia, zamiast używać tylko 1000 jako przybliżenia, ale w praktyce nie jest to takie proste i najlepiej jest użyć rozsądnego proxy .
źródło
Odpowiedź MacFreaka była dla mnie niezwykle pomocna. Oto kilka praktycznych kodów na wypadek, gdyby ci to pomogło.
PROBLEM - zastosowanie touchchend oznacza, że za każdym razem, gdy przesuwasz palcem po elemencie, reaguje on tak, jakbyś go nacisnął, nawet jeśli próbujesz tylko przewinąć.
Tworzę efekt za pomocą jQuery, który zanika linię pod niektórymi przyciskami, aby „podświetlić” przycisk najechany kursorem. Nie chcę, aby to oznaczało, że musisz dwukrotnie nacisnąć przycisk na urządzeniach dotykowych, aby kliknąć łącze.
Oto przyciski:
Chcę, aby element div "menu_underline" zanikał po najechaniu kursorem myszy i znikał po wygaśnięciu wskaźnika myszy. ALE chcę, aby urządzenia dotykowe mogły podążać za linkiem jednym kliknięciem, a nie dwoma.
ROZWIĄZANIE - Oto jQuery, aby to działało:
Wielkie dzięki za pomoc w tym MacFreak.
źródło
Właśnie się dowiedziałem, że działa, jeśli dodasz pusty odbiornik, nie pytaj mnie dlaczego, ale przetestowałem to na iPhonie i iPadzie z iOS 9.3.2 i działało dobrze.
źródło
Myślę, że twoje linki nie mają zdarzenia onmouseover, gdzie 1 dotknięcie aktywuje onmouseover, a podwójne dotknięcie aktywuje łącze. ale idk. Nie mam iPada. Myślę, że musisz używać zdarzeń gestów / dotyku.
https://developer.apple.com/documentation/webkitjs
źródło
Miałem ten sam problem, ale nie na urządzeniu dotykowym. Zdarzenie jest wyzwalane za każdym razem, gdy klikniesz. Jest coś takiego w kolejce zdarzeń.
Jednak moje rozwiązanie było takie: w przypadku kliknięcia (lub dotknięcia?) Ustawiałeś licznik czasu. Jeśli link zostanie kliknięty ponownie w ciągu X ms, po prostu zwrócisz false.
Aby ustawić licznik czasu na element, możesz użyć
$.data()
.Może to również rozwiązać opisany powyżej problem @Ferdy.
źródło
Jeśli używasz Modernizr, korzystanie z Modernizr.touch jest bardzo łatwe, jak wspomniano wcześniej.
Jednak wolę używać kombinacji Modernizr.touch i testowania agenta użytkownika, aby być bezpiecznym.
Jeśli nie używasz Modernizr, możesz po prostu zamienić
Modernizr.touch
powyższą funkcję na('ontouchstart' in document.documentElement)
Pamiętaj również, że testowanie klienta użytkownika iemobile zapewni szerszy zakres wykrytych urządzeń mobilnych Microsoft niż Windows Phone.
źródło
Możesz użyć
click touchend
,przykład:
Powyższy przykład wpłynie na wszystkie linki na urządzeniach dotykowych.
Jeśli chcesz kierować reklamy tylko na określone linki, możesz to zrobić, ustawiając dla nich klasę, tj .:
HTML:
<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>
JQuery:
Twoje zdrowie,
Jeroen
źródło
Wpadłem na podobną sytuację, w której miałem zdarzenia powiązane ze stanami mouseenter / mouseleave / click elementu, ale na iPhonie użytkownik musiał dwukrotnie kliknąć element, aby najpierw wywołać zdarzenie mouseenter, a następnie ponownie, aby uruchomić zdarzenie kliknięcia .
Rozwiązałem to przy użyciu podobnej metody jak powyżej, ale użyłem wtyczki jQuery $ .browser (dla jQuery 1.9>) i dodałem zdarzenie .trigger do zdarzenia wiązania myszy w następujący sposób:
.Trigger zapobiega konieczności dwukrotnego kliknięcia elementu, uruchamiając procedurę obsługi zdarzenia .click po naciśnięciu przycisku myszy (lub pierwszym kliknięciu) elementu podczas przeglądania na iPhone'ach lub iPadach. Może nie jest to najbardziej eleganckie rozwiązanie, ale działa świetnie w moim przypadku i wykorzystuje wtyczkę, którą już miałem na miejscu i wymagała ode mnie dodania jednej linii kodu, aby moje istniejące zdarzenia działały na tych urządzeniach.
Możesz pobrać wtyczkę jQuery $ .browser tutaj: https://github.com/gabceb/jquery-browser-plugin
źródło
To tylko ulepszenie, aby uniknąć przekierowania, gdy przez pomyłkę przesuwasz palcem po linku.
źródło
Inspirując się MacFreak, stworzyłem coś, co działa na mnie.
Ta metoda js zapobiega przyklejaniu się wskaźnika do iPada, aw niektórych przypadkach zapobiega rejestrowaniu kliknięcia jako dwóch kliknięć. W CSS, jeśli masz jakieś: hover klasy psudo w swoim css, zmień je na .hover Na przykład .some-class: hover na .some-class.hover
Przetestuj ten kod na iPadzie, aby zobaczyć, jak różnie zachowują się metody css i js hover (tylko w przypadku efektu hover). Przycisk CSS nie ma fantazyjnego powiadomienia o kliknięciu. http://jsfiddle.net/bensontrent/ctgr6stm/
źródło
Aby linki działały bez przerywania przewijania dotykowego, rozwiązałem ten problem za pomocą zdarzenia „tap” w jQuery Mobile:
źródło
Wiem, że jestem za późno, ale jest to jedno z najłatwiejszych obejść, jakie znalazłem:
Działa to nie tylko w przypadku linków (znaczników kotwicy), ale także innych elementów. Mam nadzieję że to pomoże.
źródło
Ten krótki fragment wydaje się działać. Wywołaj zdarzenie kliknięcia po dotknięciu linku:
źródło
Żadna z odpowiedzi drugiej nie działa dla mnie. Moja aplikacja ma wiele odbiorników zdarzeń, własne pola wyboru i linki, które mają słuchaczy i linki bez słuchaczy.
Używam tego:
źródło
Działa to dla mnie, gdy masz menu rozwijane jQuery ui
źródło
Unikaj zmiany stylu „display” wewnątrz zdarzenia hover css. Miałem "display: block" w stanie najechania. Po usunięciu ios poszło na liny jednym dotknięciem. Swoją drogą wygląda na to, że najnowsze aktualizacje IOS naprawiły tę „funkcję”
źródło
Najprostszym sposobem rozwiązania problemu dwukrotnego kliknięcia na iPadzie jest zawijanie CSS w celu uzyskania efektu najechania kursorem w zapytaniu o media
@media (pointer: fine)
:CSS zawarty w tym zapytaniu o media będzie obowiązywał tylko na komputerach stacjonarnych.
Wyjaśnienie tego rozwiązania znajduje się tutaj https://css-tricks.com/annoying-mobile-double-tap-link-issue/
źródło
Możesz sprawdzić
navigator.userAgent
tak:ale musiałbyś sprawdzić jeżyny, droidy, puste inne urządzenia z ekranem dotykowym. Możesz również powiązać ruchy myszy tylko wtedy, gdy userAgent zawiera Mozilla, IE, Webkit lub Opera, ale nadal musisz sprawdzać niektóre urządzenia, ponieważ na przykład Droid zgłasza swój ciąg userAgent jako:
Sznurek iPhone'a jest podobny. Jeśli korzystasz tylko z iPhone'a, iPoda, iPada, Androida i Blackberry, możesz dostać większość urządzeń przenośnych, ale nie wszystkie.
źródło
Po prostu wykonaj zapytanie o media CSS, które wyklucza tablety i urządzenia mobilne, i umieść tam kursor. Naprawdę nie potrzebujesz do tego jQuery ani JavaScript.
I pamiętaj, aby dodać to do swojej głowy HTML, aby upewnić się, że oblicza się z rzeczywistymi pikselami, a nie rozdzielczością.
źródło