Contoh untuk menerangkan perbezaan antara mouseleave dan mouseout dalam jquery_jquery

Artikel ini memperkenalkan secara terperinci perbezaan antara mouseleave dan mouseout dalam jQuery, dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut
Apabila ramai orang menggunakan jQuery untuk melaksanakan kesan tuding tetikus, mereka biasanya menggunakan acara alih tetikus dan keluar tetikus. Semasa proses pelaksanaan, beberapa situasi yang tidak diingini mungkin berlaku.
Mari kita lihat kesan penggunaan mouseout dahulu:

<p>先看下使用mouseout的效果：</p>
<div id="container" style="width: 300px;">
<div id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</div>
<div id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div>第一行</div>
<div>第二行</div>
<div>第三行</div>
</div>
</div>
<p><script type='text/javascript'> 
jQuery(document).ready(function($) { 
   $("#title").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   $("#container").mouseout(function() { 
     $("#list").hide(); 
   }); 
 }); 
</script>

Baris 1, Baris 2, Baris 3 Kami mendapati bahawa apabila menggunakan acara keluar tetikus, hide() dicetuskan sebaik sahaja tetikus bergerak dalam bekas lungsur #senarai, ini adalah kerana acara keluar tetikus berbuih , iaitu Peristiwa mungkin terikat pada elemen anak bekas pada masa yang sama, jadi hide() kami akan dicetuskan apabila tetikus bergerak keluar dari setiap elemen anak.
Dua acara tetikus baharu telah ditambah sejak jQuery 1.3, mouseenter dan mouseleave. Berbeza dengan acara tetikus, acara tetikus hanya dicetuskan apabila penuding tetikus meninggalkan elemen yang dipilih.
Mari kita lihat kesan peristiwa daun tetikus:

<div id="container2" style="width: 300px;">
<div id="title2" style="cursor: pointer; background: #ccc;">使用了mouseleave事件↓</div>
<div id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<div>第一行</div>
<div>第二行</div>
<div>第三行</div>
</div>
</div>
<script type='text/javascript'> 
jQuery(document).ready(function($) { 
   $("#title2").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list2").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   // 绑定mouseleave事件，效果很好 
   $("#container2").mouseleave(function() { 
     $("#list2").hide(); 
   }); 
 }); 
</script>
<p>

Peristiwa baris pertama, baris kedua, baris ketiga dan keluar tetikus mempunyai kegunaan tersendiri, kerana acara menggelegak sangat berguna pada masa tertentu
Selesaikan masalah acara div mouseout menggelegak
Penyelesaiannya adalah dengan menggunakan kaedah bind jquery
Contohnya: Kini terdapat objek div yang perlu memantau acara tetikusnya

<div class="dpx2"><div class="dpx2_px" style="cursor:pointer;" id="searchSort">请选择排序方式↓</div>
      <div class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
        <div><a class="sortA">按时间升序↑</a></div>
        <div><a class="sortA">按时间降序↓</a></div>
        <div><a class="sortA">按评论数量升序↑</a></div>
        <div><a class="sortA">按评论数量降序↓</a></div>
        <div><a class="sortA">按点击数升序↑</a></div>
        <div><a class="sortA">按点击数降序↓</a></div>
      </div>
    </div>

Apabila tetikus bergerak ke atas Div dengan ID searchSort, div berikut dipaparkan. Apabila tetikus bergerak keluar dari div di bawah, sembunyikan div
JS ialah:

 $(function(){
         var sortList = $("#sortList");
      $("#searchSort").mouseover(function() {
         var offset = $(this).offset();
        sortList.css("left", offset.left);
        sortList.css("top", offset.top+20);
        sortList.show();
      });
//关键的一句，绑定Div对象的mouseleave事件
      sortList.bind("mouseleave", function() {
        $(this).hide();
      });
    });

Menurut penjelasan di atas, simulasikan kesan lungsur turun:
1. Tidak kira sama ada penuding tetikus meninggalkan elemen yang dipilih atau mana-mana elemen anak, acara keluar tetikus akan dicetuskan.

2. Acara meninggalkan tetikus hanya akan dicetuskan apabila penunjuk tetikus meninggalkan elemen yang dipilih.

<div class="sel_box">
  <input type="button" value="请选择所属部门" id="sel_dept" />
  <div class="hide" id="sel_dept_sh" style="display: none;">
    <p>
      <font>深圳市公司 </font>
    </p>
    <p>
      <font>集团管理层 </font>
    </p>
  </div>
</div>
 
<script type="text/javascript">
$(".sel_box").click(function(event){
   if(event.target.id == 'sel_dept'){
     $("#sel_dept_sh").show(); //显示下拉框
     $("#sel_dept_sh p font").click(function(){
       $("#sel_dept").val('');
       var text = $(this).text();
      // alert(text);
       $("#sel_dept").val(text).css("color","#000");
       $("#sel_dept_sh").hide();
     });
 
   }else{
     $("#sel_dept_sh").hide();
   }
   
 
});
 
$(".sel_box").bind("mouseleave",function(){//用mouseleave就实现了模仿下拉框的效果
    $(this).find(".hide").hide();  
  });
 
$(".sel_box").bind("mouseout",function(){//而mouseout则不行，什么时候都会触发
    $(this).find(".hide").hide();  
  });
</script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.