Czy w jQuery jest szybki i łatwy sposób to zrobić?
Nie chcę używać zdarzenia myszy, ponieważ już go używam do czegoś innego. Muszę tylko wiedzieć, czy myszka znajduje się nad elementem w danym momencie.
Chciałbym zrobić coś takiego, gdyby tylko istniała funkcja „IsMouseOver”:
function hideTip(oi) {
setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
Odpowiedzi:
Ustaw limit czasu myszy, aby zanikać i zapisz wartość zwracaną do danych w obiekcie. Następnie po najechaniu myszą anuluj limit czasu, jeśli w danych znajduje się wartość.
Usuń dane po wywołaniu zwrotnym zanikania.
W rzeczywistości korzystanie z mouseenter / mouseleave jest tańsze, ponieważ nie uruchamiają menu, gdy dzieci najeżdżają kursorem myszy / mouseout.
źródło
Ten kod ilustruje to, co szczęśliwie Harry i ja próbujemy powiedzieć. Kiedy mysz wchodzi, pojawia się etykietka, kiedy mysz opuszcza, ustawia opóźnienie zniknięcia. Jeśli mysz wejdzie w ten sam element przed wyzwoleniem opóźnienia, to niszczymy spust, zanim zadziała, korzystając z danych, które wcześniej zapisaliśmy.
źródło
Czysty i elegancki czek w dymku:
źródło
OSTRZEŻENIE:
is(':hover')
jest przestarzałe w jquery 1.8+. Zobacz ten post dla rozwiązania.Możesz także użyć tej odpowiedzi: https://stackoverflow.com/a/6035278/8843, aby przetestować, czy wskaźnik myszy znajduje się nad elementem:
źródło
:hover
nie jest prawidłowym selektorem jQuery: api.jquery.com/category/selectors (źródło: bugs.jquery.com/ticket/11574 )document.querySelectorAll(':hover')
Możesz użyć
hover
zdarzenia jQuery do ręcznego śledzenia:źródło
$.data
nie wymaga manipulacji ciągiem.Potrzebowałem czegoś dokładnie takiego (w nieco bardziej złożonym środowisku, a rozwiązanie z wieloma „mouseenters” i „mouseleaves” nie działało poprawnie), więc stworzyłem małą wtyczkę jquery, która dodaje tę metodę. Do tej pory działało całkiem dobrze.
Następnie w dowolnym miejscu dokumentu nazywaj go tak i zwraca on wartość prawda lub fałsz:
Przetestowałem to na IE7 +, Chrome 1+ i Firefox 4 i działa poprawnie.
źródło
W jQuery możesz użyć .is (': hover'), więc
byłby teraz najbardziej zwięzłym sposobem zapewnienia funkcji wymaganej w PO.
Uwaga: powyższe nie działa w IE8 lub niższej
Jako mniej zwięzła alternatywa, która działa w IE8 (jeśli mogę zaufać modułowi IE8 IE9), i robi to bez uruchamiania
$(...).hover(...)
wszędzie, ani nie wymaga znajomości selektora dla elementu (w takim przypadku odpowiedź Ivo jest łatwiejsza):źródło
$(':hover')
ma pracę w IE8. Jest to prawidłowy pseudo selektor CSS2, więc powinien działać.Wziąłem pomysł SLaksa i zawarłem go w małą klasę .
źródło
Zrobiłem wtyczkę jQuery, która może to zrobić i wiele więcej. W mojej wtyczce, aby uzyskać wszystkie elementy, na których kursor jest obecnie najechany kursorem, po prostu wykonaj następujące czynności:
Jak wspomniałem, ma również wiele innych zastosowań, jak widać w
jsFiddle znaleziono tutaj
źródło
Ponieważ nie mogę komentować, napiszę to jako odpowiedź!
Proszę zrozumieć różnicę między selektorem css „: hover” a zdarzeniem hover!
„: hover” to selektor css i rzeczywiście został usunięty ze zdarzeniem, gdy jest używany w ten sposób
$("#elementId").is(":hover")
, ale w sensie oznacza to, że tak naprawdę nie ma nic wspólnego z aktywowaniem zdarzenia jQuery.jeśli kodujesz
$("#elementId:hover")
, element zostanie wybrany tylko po najechaniu myszką. powyższa instrukcja będzie działać ze wszystkimi wersjami jQuery, gdy wybierzesz ten element z czystym i zgodnym wyborem css.Z drugiej strony najechanie kursorem, które jest
jest rzeczywiście przestarzałe jako jQuery 1.8 tutaj stan ze strony jQuery:
Dlaczego usunęli to użycie („: hover”) jest niejasne, ale no cóż, nadal możesz go używać tak jak powyżej i tutaj jest mały hack, aby go nadal używać.
Aha i nie poleciłbym wersji limitu czasu, ponieważ przynosi to dużo komplikacji , użyj funkcji limitu czasu dla tego rodzaju rzeczy, jeśli nie ma innego wyjścia i uwierz mi, w 95% procent wszystkich przypadków jest inny sposób !
Mam nadzieję, że mógłbym pomóc kilku osobom.
Greetz Andy
źródło
Dziękuję wam obu. W pewnym momencie musiałem zrezygnować z próby wykrycia, czy mysz nadal znajduje się nad elementem. Wiem, że jest to możliwe, ale może wymagać zbyt dużo kodu do osiągnięcia.
Zajęło mi to trochę czasu, ale wziąłem obie twoje sugestie i wymyśliłem coś, co zadziałałoby dla mnie.
Oto uproszczony (ale funkcjonalny) przykład:
A potem, aby to zadziałało na jakimś tekście, to wszystko, co muszę zrobić:
Wraz z dużą ilością fantazyjnych CSS, pozwala to na bardzo ładne podpowiedzi najechania myszką. Nawiasem mówiąc, potrzebowałem opóźnienia w wyciszeniu myszy z powodu niewielkich przerw między polami wyboru i tekstem, które powodowały miganie pomocy podczas przesuwania myszy. Ale to działa jak urok. Zrobiłem też coś podobnego w przypadku zdarzeń skupienia / rozmycia.
źródło
Widzę często używane limity czasu, ale czy w kontekście wydarzenia nie możesz spojrzeć na współrzędne, takie jak to ?:
W zależności od kontekstu może być konieczne upewnienie się (this == e.target) przed wywołaniem areXYInside (e).
fyi- Patrzę na użycie tego podejścia w module obsługi dragLeave, aby potwierdzić, że zdarzenie dragLeave nie zostało wywołane przez przejście do elementu potomnego. Jeśli w jakiś sposób nie sprawdzisz, czy nadal jesteś w elemencie macierzystym, możesz przez pomyłkę podjąć działanie, które jest przeznaczone tylko wtedy, gdy naprawdę opuścisz rodzica.
EDYCJA: to fajny pomysł, ale nie działa wystarczająco konsekwentnie. Być może z drobnymi poprawkami.
źródło
Możesz sprawdzić,
jQuery
czy jakikolwiek div div ma określoną klasę. Następnie, stosując tę klasę, gdy przesuwasz myszką nad i na zewnątrz określonego elementu div, możesz sprawdzić, czy wskaźnik myszy znajduje się nad nim, nawet gdy najedziesz myszką na inny element na stronie Znacznie mniej kodu w ten sposób. Użyłem tego, ponieważ w wyskakującym okienku miałem odstępy między divami i chciałem zamknąć wyskakujące okienko tylko wtedy, gdy się wyłączyłem, a nie kiedy przesuwałem mysz nad odstępami w wyskakującym okienku. Więc nazywałam funkcję najechania kursorem na div treści (która wyskoczyła po wyskakującym okienku), ale wyzwalałaby ona funkcję zamykania tylko wtedy, gdy najechałem myszą na div treści, ORAZ poza pop-upem!źródło
To byłby najłatwiejszy sposób na zrobienie tego!
źródło
Oto technika, która nie polega na jquery i wykorzystuje natywny
matches
interfejs API DOM . Używa prefiksów dostawcy do obsługi przeglądarek wracających do IE9. Zobacz matchselector na caniuse.com, aby uzyskać szczegółowe informacje.Najpierw utwórz funkcję matchSelector, taką jak:
Następnie, aby wykryć aktywowanie:
źródło
Odpowiedziałem na to w innym pytaniu, ze wszystkimi szczegółami, których możesz potrzebować:
Wykryj JEŻELI najeżdżasz na element za pomocą jQuery (ma 99 głosów pozytywnych w momencie pisania)
Zasadniczo możesz zrobić coś takiego:
Działa to tylko wtedy,
oi
gdy obiekt jQuery zawiera pojedynczy element. Jeśli dopasowanych jest wiele elementów, musisz zastosować do każdego elementu, na przykład:Zostało to przetestowane od wersji jQuery 1.7.
źródło
Oto funkcja, która pomaga sprawdzić, czy mysz znajduje się w elemencie, czy nie. Jedyne, co powinieneś zrobić, to wywołać funkcję, w której możesz mieć obiekt EventObject powiązany z myszą na żywo. coś takiego:
Możesz zobaczyć kod źródłowy tutaj w github lub na dole postu:
https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js
źródło
W oparciu o to, co powiedział „Happytime harry”, pamiętaj o użyciu funkcji jquery .data () do przechowywania identyfikatora limitu czasu. Jest to tak, że możesz bardzo łatwo odzyskać identyfikator limitu czasu, gdy „myszka” zostanie później uruchomiona na tym samym elemencie, co pozwala wyeliminować wyzwalacz zniknięcia podpowiedzi.
źródło
Możesz użyć zdarzeń myszy i pozostawienia myszy w jQuery. Możesz ustawić flagę, gdy mysz znajdzie się w pożądanym obszarze, i odznaczyć flagę, gdy opuszcza obszar.
źródło
Połączyłem pomysły z tego tematu i wymyśliłem to, co jest przydatne do pokazywania / ukrywania podmenu:
Wydaje się dla mnie pracować. Mam nadzieję, że to komuś pomoże.
EDYCJA: Teraz uświadomienie sobie, że to podejście nie działa poprawnie w IE.
źródło
Nie mogłem użyć żadnej z powyższych sugestii.
Dlaczego wolę moje rozwiązanie?
Ta metoda sprawdza, czy wskaźnik myszy znajduje się nad elementem w dowolnym momencie wybranym przez Ciebie .
Mouseenter i : hover są fajne, ale mouseenter uruchamia się tylko wtedy, gdy poruszasz myszą, a nie gdy element porusza się pod myszą.
: hover jest całkiem słodki, ale ... IE
Więc robię to:
Nie 1. przechowuj pozycję myszy x, y za każdym razem, gdy jest ona przesuwana, kiedy potrzebujesz,
Nie 2. sprawdzaj, czy wskaźnik myszy znajduje się nad dowolnym elementem pasującym do zapytania, wykonuj różne czynności ... jak wyzwalanie zdarzenia mouseenter
źródło
Tylko notatkę o popularnej i pomocnej odpowiedzi Arthura Goldsmitha powyżej: jeśli przenosisz mysz z jednego elementu do drugiego w IE (przynajmniej do IE 9), możesz mieć problemy z poprawnym działaniem, jeśli nowy element ma przezroczyste tło (które byłoby domyślnie). Moim obejściem było nadanie nowemu elementowi przezroczystego obrazu tła.
źródło
SKRZYPCE
źródło
Możesz użyć
is(':visible');
w jquery. Za $ ('. Item: hover') działa również w Jquery.to jest fragment kodu HTML:
a to jest kod JS:
o tym mówiłem :)
źródło