jquery中的mouseover、mouseout 和 mouseenter 、 mouseleave的区别

原文地址：http://www.5ixiudou.com/portal/detailInfo/1000000005/286

现在有这样一种需求，鼠标放置到 有灰色背景框的div上之后，显示操作按钮，编辑和删除

这时候，大家可能会想到使用 jquery中的 mouseover 和 mouseout 方法，在鼠标放置上去的时候，使用 mouseover 方法，离开的时候使用 mouseout方法。但是使用之后，就会发现，当鼠标放置到 文字和图片上之后，两个操作按钮不显示了。这就表示，在鼠标放置到图片和文字上时，触发了 mouseover的方法，认为鼠标已经不在div上了。这时，与我们的需求是不相符的。

这时，我们可以换用 mouseenter和mouseleave，使用这两个方法，只要鼠标在div范围内，就会触发mouseenter。下面来讲解下 jquery的这两组控制方法的区别：

（1）mouseover 和 mouseout

这两个方法，是当鼠标直接在某个dom上进行触发的。

如上面的例子，当鼠标直接在外层的div中的时候，是可以触发mouseover的，但是当鼠标放置到div中的内容(图片和文字)上的时候，就会触发 mouseout方法。所以，这两个方法的关键点就是判断是否是直接在 dom 上。

 

（2）mouseenter 和 mouseleave

这两个方法，是当鼠标进入到某个dom 的页面范围内进行触发的。

在上面的例子中，只要鼠标放置到了div 的范围内，不管是不是在 图片和文字上，都可以进行触发。这组事件的关键点是页面的范围。

 

所以，大家在平时的开发中，可以根据自己的需要来选择正确的事件。

 

更多内容，请关注我的个人博客 ： 爱秀逗 www.5ixiudou.com

爱秀逗-IT资讯 info.5ixiudou.com，新品上线，敬请关注。大家共同学习，共同进步。