Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan kesan pemprosesan tertunda dari event_jquery yang lulus tetikus
JQuery tetikus ke atas (legar) pemprosesan kelewatan acara, kod JS khusus adalah seperti berikut:
(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);
Kaedah hoverDelay mempunyai empat parameter, yang bermaksud yang berikut:
legarSemasa Masa kelewatan tetikus melalui
keluarSemasa Masa tunda keluar tetikus
hoverEvent Kaedah dilaksanakan selepas tetikus melepasi
outEvent Kaedah dilaksanakan apabila tetikus dialihkan keluar
Tujuan fungsi ini adalah untuk memisahkan peristiwa lulus tetikus dan kelewatan dan kelewatan pembersihan telah diselesaikan dengan kaedah ini. Apa yang anda perlu lakukan ialah menetapkan masa tunda dan acara pas tetikus atau penyingkiran yang sepadan. Mari kita ambil contoh mudah , seperti berikut:
$("#test").hoverDelay({ hoverDuring: 1000, outDuring: 1000, hoverEvent: function(){ $("#tm").show(); }, outEvent: function(){ $("#tm").hide(); } });
Berikut ialah kes yang lebih ringkas:
$("#test").hoverDelay({ hoverEvent: function(){ alert("经过 我!"); } });
bermakna elemen dengan ujian id akan muncul kotak pop timbul yang mengandungi teks "Lepasi saya 200 milisaat selepas tetikus melewatinya!"
Di atas adalah mengenai pemprosesan tertunda acara jQuery tetikus ke atas (legar) saya harap ia akan membantu pembelajaran semua orang.