认清鼠标移入移出事件

Posted 2020-09-06

本文也同步发表在我的公众号“我的天空”

 

鼠标的移入移出事件，是在我们做一些前端效果时使用相当频繁的事件，但在JS中，鼠标的移入移出事件有两对，分别是mouseover、mouseout；以及mouseenter、mouseleave，如果没有对其的区别有清新的认识话，则很容易掉坑里！

 譬如某次有人反映需要做以下这么一个效果：当鼠标移入背景图片时，将有一个遮罩层升起，当鼠标移出后，遮罩层落下（如图），该效果还是很常见的：

其采用jquery的animate()结合鼠标的移入移出事件来处理，背景图片的class设为A，遮罩层的class为B，通过设置其bottom属性来实现其升起与落下，其代码如下：

 

$(".A").mouseover(function(){
   $(".B", this).animate({"bottom":"0px"},"slow");
}).mouseout(function(){
   $(".B", this).animate({"bottom":"-210px"},"slow");
});

 但是该代码运行的效果却不是预期：

很明显，遮罩层的升降比预期的次数要多一次。问题就是出现在mouserover与mouerout的选取的不正确。

 我们首先来看下mouseover与mouseout事件的解释：

mouseover：鼠标指针位于一个元素的外部，然后用户将其首次移入另一个元素边界之内是触发。

mouseout：鼠标指针位于一个元素上方，然后将其移入另一个元素时触发，这个元素可以位于前一个元素的外部，也可能是这个元素的内部。

我们来分析一下我们实际遇到的情况，当鼠标移入背景图片时，毫无疑问触发mouseover事件，遮罩层开始上移，当遮罩层上移至鼠标上方时，虽然我们没有移动鼠标，但是鼠标却从背景图片区域进入遮罩层区域，那么触发了mouseout事件（遮罩层属于背景图片内部的元素），这样便将遮罩层下移的animate()也加入了事件队列，当其升起过程结束后，自然又开始下移的过程，导出效果不是我们的预期。

要修正该代码，实际上应该使用mouseenter与mouseleave事件，这两个事件在鼠标移入后代元素时不会被触发：

 

$(".A").mouseenter(function(){
   $(".B", this).animate({"bottom":"0px"},"slow");
}).mouseleave(function(){
   $(".B", this).animate({"bottom":"-210px"},"slow");
});

 mouseover、mouseout与mouseenter、mouseleave别再傻傻分不清楚啦！