Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan kesan pemprosesan tertunda dari event_jquery yang lulus tetikus

jQuery melaksanakan kesan pemprosesan tertunda dari event_jquery yang lulus tetikus

WBOY
WBOYasal
2016-05-16 15:35:141510semak imbas

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.

Kenyataan:
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