Chcę mieć możliwość wykrywania, kiedy mysz opuszcza okno, aby móc zatrzymać uruchamianie zdarzeń, gdy mysz użytkownika znajduje się w innym miejscu.
Jakieś pomysły, jak to zrobić?
Chcę mieć możliwość wykrywania, kiedy mysz opuszcza okno, aby móc zatrzymać uruchamianie zdarzeń, gdy mysz użytkownika znajduje się w innym miejscu.
Jakieś pomysły, jak to zrobić?
Odpowiedzi:
Pamiętaj, że moja odpowiedź bardzo się postarzała.
Ten typ zachowania jest zwykle pożądany podczas implementowania zachowania przeciągnij-upuść na stronie html. Poniższe rozwiązanie zostało przetestowane w przeglądarkach IE 8.0.6, FireFox 3.6.6, Opera 10.53 i Safari 4 na komputerze z systemem MS Windows XP.
Najpierw mała funkcja od Petera-Paula Kocha; obsługa zdarzeń w różnych przeglądarkach:
Następnie użyj tej metody, aby dołączyć procedurę obsługi zdarzenia do zdarzenia mouseout obiektów dokumentu:
Wreszcie, oto strona HTML ze skryptem osadzonym do debugowania:
źródło
Jeśli używasz jQuery, co powiesz na ten krótki i słodki kod -
To zdarzenie będzie wywoływane za każdym razem, gdy na stronie nie ma myszy, tak jak chcesz. Po prostu zmień funkcję, aby robić, co chcesz.
Możesz też użyć:
Aby wywołać, gdy mysz ponownie wejdzie na stronę.
Źródło: https://stackoverflow.com/a/16029966/895724
źródło
To działa dla mnie:
źródło
addEvent
?if (!evt.toElement && !evt.relatedTarget)
Aby wykryć mouseleave bez uwzględnienia paska przewijania i pola autouzupełniania lub inspekcji:
Warunki wyjaśnienia:
======================== EDYCJA ========================= ======
Document.addEventListener ("mouseleave") wydaje się nie uruchamiać w nowej wersji przeglądarki Firefox, mouseleave musi być dołączone do elementu takiego jak body lub elementu podrzędnego.
Proponuję zamiast tego użyć
Lub
źródło
Użycie zdarzenia onMouseLeave zapobiega bulgotaniu i pozwala łatwo wykryć, kiedy mysz opuszcza okno przeglądarki.
http://www.w3schools.com/jsref/event_onmouseleave.asp
źródło
document.onmouseleave = function() { alert('You left!') };
nie używaj document.body, który odpala powyżej pasków przewijania, które zmniejszają ciało! Kod zapobiegający pożarowi elementów nie jest potrzebny. Dobre wyjaśnienie: developer.mozilla.org/en-US/docs/Web/API/Element/ ...Żadna z tych odpowiedzi nie zadziałała dla mnie. Teraz używam:
Używam tego do przeciągania i upuszczania widżetu do przesyłania plików. Nie jest to całkowicie dokładne, ponieważ jest uruchamiane, gdy mysz znajdzie się w pewnej odległości od krawędzi okna.
źródło
Wypróbowałem wszystkie powyższe, ale nic nie działa zgodnie z oczekiwaniami. Po krótkich poszukiwaniach odkryłem, że e.relatedTarget to kod HTML tuż przed wyjściem myszy z okna .
Więc ... Skończyło się na tym:
Daj mi znać, jeśli znajdziesz jakieś problemy lub ulepszenia!
Aktualizacja 2019
(jak dowiedział się użytkownik1084282)
źródło
relatedTarget
jest zerowa, gdy mysz opuszcza okno. Zainspirowany odpowiedzią @ user1084282, zmień to na to:if(!e.relatedTarget && !e.toElement) { ... }
i działaif(!e.relatedTarget && !e.toElement)
zamiast warunku w rzeczywistej odpowiedzi. Wykrywa, że mysz opuszcza treść dokumentu.Cofam to, co powiedziałem. To jest możliwe. Napisałem ten kod, działa idealnie.
działa w chrome, firefox, opera. Nie testowano w IE, ale załóżmy, że działa.
edytować. IE jak zawsze sprawia kłopoty. Aby to działało w IE, zamień zdarzenia z okna na dokument:
połącz je, aby wykryć kursor wykopu między przeglądarkami o0: P
źródło
zastosuj ten CSS:
Dzięki temu element html zajmie całą wysokość okna.
zastosuj to jquery:
Problem z najechaniem myszą i wyprowadzeniem myszy polega na tym, że jeśli przesuniesz kursor myszy na element podrzędny lub najedziesz kursorem na element podrzędny, spowoduje to wyzwolenie zdarzenia. Funkcja, którą podałem, nie jest włączana po najechaniu myszą na element potomny. Jest wyłączany tylko po najechaniu kursorem myszy na okno
tylko po to, żebyś wiedział, że możesz to zrobić, gdy użytkownik najedzie myszką w oknie:
źródło
Próbowałem jeden po drugim i wtedy znalazłem najlepszą odpowiedź:
https://stackoverflow.com/a/3187524/985399
Pomijam stare przeglądarki, więc skróciłem kod do pracy na nowoczesnych przeglądarkach (IE9 +)
Tutaj widzisz obsługę przeglądarki
Pomyślałem, że to było dość krótkie
Ale problem nadal występował, ponieważ "mouseout" uruchamiał się na wszystkich elementach w dokumencie .
Aby temu zapobiec, użyj mouseleave (IE5.5 +). Zobacz dobre wyjaśnienie w linku.
Poniższy kod działa bez wyzwalania elementów wewnątrz elementu, które mają znajdować się wewnątrz lub na zewnątrz. Spróbuj także przeciągnąć i zwolnić poza dokumentem.
Możesz ustawić zdarzenie na dowolnym elemencie HTML. Nie
document.body
włączaj jednak zdarzenia, ponieważ pasek przewijania w systemie Windows może zmniejszać zawartość i uruchamiać się, gdy wskaźnik myszy znajduje się nad paskiem przewijania, gdy chcesz przewijać, ale nie chcesz wyzwalać zdarzenia mouseLeave nad nim.document
Zamiast tego włącz go , jak w przykładzie.źródło
Może jeśli ciągle słuchasz OnMouseOver w tagu body, wtedy wywołanie zwrotne, gdy zdarzenie nie występuje, ale, jak twierdzi Zack, może to być bardzo brzydkie, ponieważ nie wszystkie przeglądarki obsługują zdarzenia w ten sam sposób, jest nawet kilka możliwość, że stracisz MouseOver, nawet jeśli znajdziesz się nad elementem div na tej samej stronie.
źródło
Może to pomogłoby niektórym z tych, którzy przyjadą tu później.
window.onblur
idocument.mouseout
.window.onblur
jest uruchamiany, gdy:Ctrl+Tab
lubCmd+Tab
.Zasadniczo za każdym razem, gdy TA karta przeglądarki traci fokus.
document.mouseout
jest uruchamiany, gdy:Ctrl+Tab
lubCmd+Tab
.Zasadniczo w każdym przypadku, gdy kursor opuszcza dokument.
źródło
window.onblur
. +1To może być trochę hakerskie, ale uruchamia się tylko wtedy, gdy mysz opuści okno. Ciągle łapałem zdarzenia dla dzieci i to rozwiązało problem
źródło
źródło
To zadziałało dla mnie. Połączenie niektórych odpowiedzi tutaj. I tylko raz zamieściłem kod pokazujący model. Model znika po kliknięciu w innym miejscu.
źródło
Zobacz
mouseover
imouseout
.źródło
Nie testowałem tego, ale moim instynktem byłoby wywołanie funkcji OnMouseOut na tagu body.
źródło
To zadziała w chrome,
źródło