Exemples pour expliquer la différence entre mouseleave et mouseout dans jquery_jquery

Cet article présente en détail la différence entre mouseleave et mouseout dans jQuery, et le partage avec vous pour votre référence. Le contenu spécifique est le suivant
. Lorsque de nombreuses personnes utilisent jQuery pour implémenter des effets de survol de la souris, elles utilisent généralement les événements mouseover et mouseout. Au cours du processus de mise en œuvre, certaines situations indésirables peuvent survenir.
Jetons d'abord un coup d'œil à l'effet de l'utilisation de mouseout :

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

Ligne 1, Ligne 2, Ligne 3 Nous avons constaté que lors de l'utilisation de l'événement mouseout, hide() est déclenché dès que la souris se déplace dans la #liste du conteneur déroulant. C'est en fait parce que l'événement mouseout apparaît, c'est-à-dire que l'événement peut être lié aux éléments enfants du conteneur en même temps, donc notre hide() sera déclenché lorsque la souris quitte chaque élément enfant.
Deux nouveaux événements de souris ont été ajoutés depuis jQuery 1.3, mouseenter et mouseleave. Contrairement à l'événement mouseout, l'événement mouseleave n'est déclenché que lorsque le pointeur de la souris quitte l'élément sélectionné.
Jetons un coup d'œil à l'effet de l'événement mouseleave :

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

Les événements mouseleave et mouseout de première ligne, deuxième ligne, troisième ligne ont leurs propres utilisations, car le bouillonnement d'événements est très utile à certains moments
Résoudre le problème de l'événement div mouseout bouillonnant
La solution est d’utiliser la méthode bind de jquery
Par exemple : Il existe désormais un objet div qui doit surveiller ses événements de souris

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

Lorsque la souris passe sur le Div avec ID searchSort, le div suivant s'affiche. Lorsque la souris sort du div ci-dessous, cachez le div
JS c'est :

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

Selon l'explication ci-dessus, simulez l'effet déroulant :
1. Que le pointeur de la souris quitte l'élément sélectionné ou tout élément enfant, l'événement mouseout sera déclenché.

2. L'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quittera l'élément sélectionné.

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.