Heim >Web-Frontend >js-Tutorial >jQuery implementiert den verzögerten Verarbeitungseffekt der Mausübergabe an event_jquery
JQuery-Maus über (Hover) Ereignisverzögerungsverarbeitung, der spezifische JS-Code lautet wie folgt:
(function($){ $.fn.hoverDelay = function(options){ var defaults = { hoverDuring: 200, outDuring: 200, hoverEvent: function(){ $.noop(); }, outEvent: function(){ $.noop(); } }; var sets = $.extend(defaults,options || {}); var hoverTimer, outTimer; return $(this).each(function(){ $(this).hover(function(){ clearTimeout(outTimer); hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); },function(){ clearTimeout(hoverTimer); outTimer = setTimeout(sets.outEvent, sets.outDuring); }); }); } })(jQuery);
Die hoverDelay-Methode hat vier Parameter, was Folgendes bedeutet:
schwebenWährend Verzögerungszeit der Mausbewegung
outWährend Mouse-Out-Verzögerungszeit
hoverEvent Methode, die nach dem Passieren der Maus ausgeführt wird
outEvent Methode, die ausgeführt wird, wenn die Maus herausbewegt wird
Der Zweck dieser Funktion besteht darin, das Mauspassereignis und die Verzögerung zu trennen und die Verzögerung zu löschen. Sie müssen lediglich die Verzögerungszeit und das entsprechende Mauspass- oder Entfernungsereignis festlegen. Nehmen wir ein einfaches Beispiel für wie folgt:
$("#test").hoverDelay({ hoverDuring: 1000, outDuring: 1000, hoverEvent: function(){ $("#tm").show(); }, outEvent: function(){ $("#tm").hide(); } });
Das Folgende ist ein prägnanterer Fall:
$("#test").hoverDelay({ hoverEvent: function(){ alert("经过 我!"); } });
bedeutet, dass das Element mit der ID-Prüfung 200 Millisekunden nach dem Überfahren mit der Maus ein Popup-Fenster mit dem Text „Pass me!“ öffnet.
Das Obige dreht sich um die verzögerte Verarbeitung des jQuery-Mouse-Over-Ereignisses. Ich hoffe, es wird für das Lernen aller hilfreich sein.