Share the difference between mouseout and mouseleave in jquery event w

This article mainly explains the difference between mouseleave and mouseout in jquery in detail with examples, imitating the drop-down box effect. Interested friends can refer to it

This article introduces in detail the differences between mouseleave and mouseout in jQuery. The difference between mouseout is shared with you for your reference. The specific content is as follows
Many people generally use the mouseover and mouseout events when using jQuery to achieve the mouse hover effect. During the implementation process, some undesirable situations may occur.
Let’s first look at the effect of using 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>

The first line, the second line, the third line, we found that when using the mouseout event, as long as the mouse moves in the drop-down container #list, the hide( ), actually because the mouseout event bubbles up, that is, the event may be bound to the child elements of the container at the same time, so our hide() will be triggered when the mouse moves out of each child element.
Starting from jQuery 1.3, two new mouse events have been added, mouseenter and mouseleave. Unlike the mouseout event, the mouseleave event is only triggered when the mouse pointer leaves the selected element.
Let’s take a look at the effect of the mouseleave event:

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

The first line, the second line, the third line, the mouseleave and mouseout events each have their own uses, because the events Bubbles are very useful at certain times
Solve the problem of p mouseout event bubbling
The solution is to use the bind method of jquery
For example: Now there is a p object that needs to monitor its mouse events

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

When the mouse moves to the p with the ID searchSort, the following p is displayed. When the mouse moves out of the p below, the hidden p
JS is:

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

According to the above explanation, simulate the drop-down effect:
1. No matter The mouseout event will be triggered when the mouse pointer leaves the selected element or any child element.

2. The mouseleave event will only be triggered when the mouse pointer leaves the selected element.

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

The above is the detailed content of Share the difference between mouseout and mouseleave in jquery event w. For more information, please follow other related articles on the PHP Chinese website!