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

来源:csdn博客 分类: 文章浏览史 发布时间:2020-09-13 13:16:58 最后更新:2020-09-13 浏览:82
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-13 13:16:58

原文地址: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,新品上线,敬请关注。大家共同学习,共同进步。

php技术微信