本文共 1978 字，大约阅读时间需要 6 分钟。

一、最简单的鼠标事件–进入与离开

1.$(selecter).mouseover(callback)

鼠标拂过对象上方时，会自动调用回调函数，执行相关操作

2.$(selcter).mouseout(callback)

鼠标离开对象时，会调用回调函数，执行相关操作

3.$(selecter).mouseenter(callback)

鼠标进入对象所在范围时，会调用回调函数，执行相关操作

4.$(selecter).mouseleave(callback)

鼠标离开对象所在范围时，会调用回调函数，执行相关操作

5.$(selecter).hover(callback1,caallback2)

hover()事件相当于鼠标进入和离开对象的结合体，它可以传入两个回调函数，在鼠标进入对象范围时，自动执行callback1函数,在对象离开对象范围时，会自动调用callback2函数。

二、鼠标事件带来的问题

现在设想一个情景，在一个div标签（div1）中包裹了另外一个div标签(div2),显然div1是div2的父级，它们是父子的关系，将二者的外框全部设置为四方形，但是要保证div2要比div1小，如下图：

1.使用mouseover()和mouseout()

执行代码以后，可以发现当鼠标进入div1范围时候，div1会带着div2整体下移，鼠标离开div1范围时，div1会带着div2整体上移，即恢复原来的位置。但是，请留心一下，如果把鼠标直接放到div2的范围内，然后在div2和div1范围内来回移动鼠标，你就会发现，div1却依然会上下移动，这就违背了我们设计的原则，本来不管是div1还是div2的边界都是存在于div1里面的，但是为何我鼠标在div1里面移动，只不过是在子级和父级标签之间移动，却会出现这种类似鼠标进出div1边界所造成的现象，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。这就是mouseover()和mouseout()事件会导致事件重复触发的缺点

2.使用mouseenter()和mouseleave()

把mouseover()和mouseout()使用mouseenter()和mouseleave()后，你就会发现刚才出现的问题消失了，因为mouseenter()只有在鼠标穿过被选元素时候才会触发事件，而mouseleave()只有在鼠标离开被选元素区域时才会触发事件。在这两个方法里面，明确了什么是被选元素的区域，就算父级里面包裹了子级，那么子级所属的区域也是父级的，这就mouseover()和mouseout()事件没有明确这个概念导致的错误。

// 鼠标摸到元素  进入子元素时不会重复触发           $box.mouseenter(function () {
                   $box.animate({
  'margin-top':100});            })            // 鼠标离开元素            $box.mouseleave(function () {
                   $box.animate({
  'margin-top':50});            })

3.使用hover()

$(selector).hover(callback1,callback2)这个事件既解决了mouseover()和mouseout()事件带来的问题，而且还把mouseenter()和mouseleave()两个事件合二为一，它里面可以调用两个回调函数，一个定义鼠标进入被选元素区域要执行的匿名功能函数，另一个定义鼠标离开被选元素区域要执行的匿名功能函数。

$box.hover(function () {
                   $box.animate({
  'margin-top':100});            },function () {
                   $box.animate({
  'margin-top':50});            })

以上就是总结的关于鼠标事件的相关内容，主要就是为了强调使用mouseover()和mouseout()带来的问题，希望引以为戒，不要以为它们的作用和效果都是一样的哦！面试的时候小心这个陷阱！

转载地址：https://blog.csdn.net/weixin_40612082/article/details/80471491 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！