Chciałbym opóźnić zdarzenie najechania kursorem w jQuery. Czytam z pliku, gdy użytkownik umieści wskaźnik myszy nad łączem lub etykietą. Nie chcę, aby to zdarzenie wystąpiło natychmiast w przypadku, gdy użytkownik porusza myszą po ekranie. Czy istnieje sposób na opóźnienie wystrzału zdarzenia?
Dziękuję Ci.
Przykładowy kod:
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
UPDATE: ( 14.01.2009 ) Po dodaniu wtyczki HoverIntent powyższy kod został zmieniony na następujący, aby go zaimplementować. Bardzo proste do wykonania.
$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
jquery
events
mouseevent
settimeout
Brettski
źródło
źródło
Odpowiedzi:
Użyj wtyczki hoverIntent dla jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html
Jest absolutnie idealny do tego, co opisujesz i używałem go w prawie każdym projekcie, który wymagał aktywacji menu najechania myszą itp.
Jest jedna pułapka do tego podejścia, niektóre interfejsy są pozbawione stanu „najechania”, np. przeglądarki mobilne, takie jak safari na iPhonie. Możesz ukrywać ważną część interfejsu lub nawigacji bez możliwości jej otwarcia na takim urządzeniu. Możesz to obejść za pomocą CSS dla konkretnego urządzenia.
źródło
Musisz sprawdzić licznik czasu po najechaniu kursorem. Jeśli nie istnieje (tj. Jest to pierwszy kursor), utwórz go. Jeśli istnieje (tj. Nie jest to pierwszy kursor), wyłącz go i uruchom ponownie. Ustaw ładunek timera na swój kod.
$(function() { var timer; $('#container a').hover(function() { if(timer) { clearTimeout(timer); timer = null } timer = setTimeout(function() { $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'}, function() { $(this).appendTo('#info'); } ); }, 500) }, // mouse out }); });
Założę się, że jQuery ma funkcję, która podsumowuje to wszystko za Ciebie.
Edycja : Ach tak, na ratunek wtyczka jQuery
źródło
Całkowicie się zgadzam, że hoverIntent to najlepsze rozwiązanie, ale jeśli zdarzy się, że jesteś nieszczęśliwym draniem, który pracuje na stronie internetowej z długim i przeciągającym się procesem zatwierdzania wtyczek jQuery, oto szybkie i brudne rozwiązanie, które działało dobrze:
$('li.contracted').hover(function () { var expanding = $(this); var timer = window.setTimeout(function () { expanding.data('timerid', null); ... do stuff }, 300); //store ID of newly created timer in DOM object expanding.data('timerid', timer); }, function () { var timerid = $(this).data('timerid'); if (timerid != null) { //mouse out, didn't timeout. Kill previously started timer window.clearTimeout(timerid); } });
Ten służy tylko do rozwijania <li>, jeśli mysz była na nim dłużej niż 300 ms.
źródło
Możesz użyć wywołania setTimeout () z clearTimeout () na zdarzeniu mouseout.
źródło
W 2016 roku rozwiązanie Crescent Fresh nie działało zgodnie z oczekiwaniami, więc wymyśliłem to:
$(selector).hover(function() { hovered = true; setTimeout(function() { if(hovered) { //do stuff } }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay }, function() { hovered = false; });
źródło
Moje rozwiązanie jest łatwe. Opóźnij otwarcie menu, jeśli użytkownik przytrzyma naciśnięty przycisk myszy na obiekcie przez ponad 300 ms:
var sleep = 0; $('#category li').mouseenter(function() { sleep = 1; $('#category li').mouseleave(function() { sleep = 0; }); var ob = $(this); setTimeout(function() { if(sleep) { // [...] Example: $('#'+ob.attr('rel')).show(); } }, 300); });
źródło