Penjelasan terperinci tentang kaedah pelaksanaan kotak gesaan kelewatan JS

Artikel ini terutamanya memperkenalkan kaedah pelaksanaan kotak gesaan kelewatan JS, dan menganalisis prinsip dan langkah-langkah pelaksanaan khusus JavaScript untuk melaksanakan fungsi gesaan kelewatan dalam bentuk contoh yang boleh dirujuk oleh Rakan yang memerlukan ia.

Fungsi kotak gesaan: Apabila tetikus menghala ke avatar, kotak maklumat boleh dialihkan ke kotak maklumat Apabila tetikus meninggalkan avatar, kotak maklumat hilang tetikus meninggalkan kotak maklumat, kotak maklumat hilang.

Idea fungsi:

1.
2 Apabila tetikus menghala ke p1, p2 dipaparkan.
3. Apabila tetikus meninggalkan p1, buat p2 hilang dengan kelewatan 0.5 saat, supaya ada masa untuk menggerakkan tetikus ke p2.
4 Apabila tetikus menghala ke p2, p2 dipaparkan. Oleh kerana setTimeout ditetapkan dalam langkah 3 untuk membuat p2 hilang, p2 boleh dipaparkan dengan mengosongkan setTimeout dengan clearTimeout().
5. Apabila tetikus meninggalkan p2, buat p2 hilang dengan kelewatan 0.5 saat, supaya ada masa untuk menghalakan tetikus ke p1.
6. Dalam langkah 2, penunjuk tetikus telah ditetapkan kepada p1, dan p2 akan dipaparkan, kerana setTimeout ditetapkan dalam langkah 5 untuk membuat p2 hilang, jadi dalam langkah 2, clearTimeout() ditambahkan untuk mengosongkan. setTimeout untuk memaparkan p2 .

Kod JS:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
  op2.onmouseover=function()
  {
    clearTimeout(time);
  };
  op2.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

Memandangkan kod kelihatan serupa, ia boleh dipermudahkan seperti berikut:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op2.onmouseover=op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op2.onmouseout=op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

HTML, kod CSS :

<p id="p1"></p>
<p id="p2"></p>
<style>
#p1{float:left;margin-right:10px;width:50px;height:50px;background:black;}
#p2{display:none;float:left;width:200px;height:200px;background:#0CF;}
</style>

【Tutorial berkaitan yang disyorkan】

1. Tutorial video JavaScript
2 Manual dalam talian JavaScript
3 . tutorial bootstrap