Beispiele zur Erläuterung des Unterschieds zwischen Mouseleave und Mouseout in jquery_jquery

In diesem Artikel wird der Unterschied zwischen Mouseleave und Mouseout in jQuery ausführlich vorgestellt und als Referenz mit Ihnen geteilt. Der spezifische Inhalt ist wie folgt:
Wenn viele Leute jQuery verwenden, um Maus-Hover-Effekte zu implementieren, verwenden sie im Allgemeinen die Ereignisse Mouseover und Mouseout. Während des Implementierungsprozesses können einige unerwünschte Situationen auftreten.
Schauen wir uns zunächst die Auswirkung der Verwendung von Mouseout an:

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

Zeile 1, Zeile 2, Zeile 3 Wir haben festgestellt, dass bei Verwendung des Mouseout-Ereignisses hide() ausgelöst wird, sobald sich die Maus im Dropdown-Container #list bewegt. Tatsächlich liegt dies daran, dass das Mouseout-Ereignis sprudelt Das heißt, das Ereignis kann gleichzeitig an die untergeordneten Elemente des Containers gebunden sein, sodass unser hide() ausgelöst wird, wenn sich die Maus aus jedem untergeordneten Element herausbewegt.
Seit jQuery 1.3 wurden zwei neue Mausereignisse hinzugefügt: Mouseenter und Mouseleave. Im Gegensatz zum Mouseout-Ereignis wird das Mouseleave-Ereignis nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt.
Werfen wir einen Blick auf die Auswirkung des Mouseleave-Ereignisses:

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

Mouseleave- und Mouseout-Ereignisse der ersten Zeile, der zweiten Zeile, der dritten Zeile haben ihre eigenen Verwendungszwecke, da das Sprudeln von Ereignissen zu bestimmten Zeiten sehr nützlich ist
Lösen Sie das Problem des sprudelnden Div-Mouseout-Ereignisses
Die Lösung besteht darin, die Bind-Methode
von jquery zu verwenden Beispiel: Es gibt jetzt ein Div-Objekt, das seine Mausereignisse überwachen muss

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

Wenn sich die Maus über das Div mit ID searchSort bewegt, wird das folgende Div angezeigt. Wenn sich die Maus aus dem Div unten bewegt, blenden Sie das Div
aus JS ist:

 $(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();
      });
    });

Simulieren Sie gemäß der obigen Erklärung den Drop-Down-Effekt:
1. Unabhängig davon, ob der Mauszeiger das ausgewählte Element oder ein untergeordnetes Element verlässt, wird das Mouseout-Ereignis ausgelöst.

2. Das Mouseleave-Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.