jQuery melaksanakan kesan pemprosesan tertunda dari event_jquery yang lulus tetikus

WBOY
Lepaskan: 2016-05-16 15:35:14
asal
1557 orang telah melayarinya

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); 
Salin selepas log masuk

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(); 
  } 
}); 
Salin selepas log masuk

Berikut ialah kes yang lebih ringkas:

$("#test").hoverDelay({ 
  hoverEvent: function(){ 
    alert("经过 我!"); 
  } 
});
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan