Ich möchte ein Schwebeereignis in jquery verzögern. Ich lese aus einer Datei, wenn der Benutzer mit der Maus über einen Link oder eine Beschriftung fährt. Ich möchte nicht, dass dieses Ereignis sofort auftritt, wenn der Benutzer nur die Maus über den Bildschirm bewegt. Gibt es eine Möglichkeit, das Auslösen des Ereignisses zu verzögern?
Danke dir.
Beispielcode:
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
UPDATE: (14.01.09) Nach dem Hinzufügen des HoverIntent-Plugins wurde der obige Code wie folgt geändert, um ihn zu implementieren. Sehr einfach zu implementieren.
$(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
quelle
quelle
Antworten:
Verwenden Sie das hoverIntent-Plugin für jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html
Es ist absolut perfekt für das, was Sie beschreiben, und ich habe es bei fast jedem Projekt verwendet, bei dem Mouseover-Aktivierung von Menüs usw. erforderlich war.
Es gibt ein Problem bei diesem Ansatz, einige Schnittstellen haben keinen Schwebezustand, z. mobile Browser wie Safari auf dem iPhone. Möglicherweise verstecken Sie einen wichtigen Teil der Benutzeroberfläche oder Navigation, ohne sie auf einem solchen Gerät öffnen zu können. Sie können dies mit gerätespezifischem CSS umgehen.
quelle
Sie müssen einen Timer beim Hover überprüfen. Wenn es nicht vorhanden ist (dh dies ist der erste Schwebeflug), erstellen Sie es. Wenn es existiert (dh dies ist nicht der erste Schwebeflug), beenden Sie es und starten Sie es neu. Stellen Sie die Timer-Nutzdaten auf Ihren Code ein.
Ich wette, jQuery hat eine Funktion, die das alles für Sie zusammenfasst.
Edit : Ah ja, jQuery Plugin zur Rettung
quelle
Stimmen Sie voll und ganz zu, dass hoverIntent die beste Lösung ist. Wenn Sie jedoch ein unglücklicher Kerl sind, der auf einer Website mit einem langen und langwierigen Prozess zur Genehmigung von jQuery-Plugins arbeitet, finden Sie hier eine schnelle und schmutzige Lösung, die für mich gut funktioniert hat:
Dies ist nur zum Erweitern eines <li> gedacht, wenn die Maus länger als 300 ms darauf war.
quelle
Sie können einen setTimeout () -Aufruf mit einem clearTimeout () für das mouseout-Ereignis verwenden.
quelle
Im Jahr 2016 hat die Lösung von Crescent Fresh für mich nicht wie erwartet funktioniert, daher habe ich mir Folgendes ausgedacht:
quelle
Meine Lösung ist einfach. Öffnen Sie das geöffnete Menü, wenn der Benutzer das Mauszentrum länger als 300 ms auf dem Objekt hält:
quelle