Partagez la différence entre mouseout et mouseleave dans l'événement jquery w

Cet article explique principalement en détail la différence entre mouseleave et mouseout dans jQuery avec des exemples, imitant l'effet de liste déroulante. Les amis intéressés peuvent s'y référer

Cet article présente en détail la différence entre mouseleave et. mouseout dans jQuery. La différence entre mouseout est partagée avec vous pour votre référence. Le contenu spécifique est le suivant
Lorsque de nombreuses personnes utilisent jQuery pour obtenir l'effet 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.
Regardons d'abord l'effet de l'utilisation de mouseout :

<p>先看下使用mouseout的效果：</p>
<p id="container" style="width: 300px;">
<p id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</p>
<p id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</p>
</p>
<p><script type=&#39;text/javascript&#39;> 
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>

Première ligne, deuxième ligne, troisième ligne Nous avons constaté que lors de l'utilisation de l'événement mouseout, la souris est déclenchée dès que la souris bouge. dans le conteneur déroulant #list. hide() est en fait dû au fait 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 sort de chaque élément enfant.
Depuis jQuery 1.3, deux nouveaux événements de souris ont été ajoutés, 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 :

<p id="container2" style="width: 300px;">
<p id="title2" style="cursor: pointer; background: #ccc;">使用了mouseleave事件↓</p>
<p id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</p>
</p>
<script type=&#39;text/javascript&#39;> 
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>

La première ligne, la deuxième ligne, la troisième ligne, le mouseleave et les événements mouseout ont leurs propres utilisations. Parce que le bouillonnement d'événements est très utile à certains moments
Pour résoudre le problème du bouillonnement d'événement p mouseout
La solution est d'utiliser la méthode bind de jquery
Par exemple : Maintenant, il y a est un objet p qui doit surveiller son événement Mouse

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

Lorsque la souris se déplace vers le p avec l'ID searchSort, le p suivant s'affiche. Lorsque la souris sort du p ci-dessous, le p
JS caché 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();
      });
//关键的一句，绑定p对象的mouseleave事件
      sortList.bind("mouseleave", function() {
        $(this).hide();
      });
    });

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

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

<p class="sel_box">
  <input type="button" value="请选择所属部门" id="sel_dept" />
  <p class="hide" id="sel_dept_sh" style="display: none;">
    <p>
      <font>深圳市公司 </font>
    </p>
    <p>
      <font>集团管理层 </font>
    </p>
  </p>
</p>
 
<script type="text/javascript">
$(".sel_box").click(function(event){
   if(event.target.id == &#39;sel_dept&#39;){
     $("#sel_dept_sh").show(); //显示下拉框
     $("#sel_dept_sh p font").click(function(){
       $("#sel_dept").val(&#39;&#39;);
       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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!