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，新品上线，敬请关注。大家共同学习，共同进步。

jquery中的mouseover、mouseout 和 mouseenter 、 mouseleave的区别相关推荐

鼠标浮动到表格的某行背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]
之前一直觉得很难,今天用到了好像超级简单 <table id="tableData"><tr class="flag"><td& ...
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
关于mouseover,mouseout 和 mouseenter,mouseleave
mouseover和mouseenter区别做了个测试. mouseover 当鼠标进入元素时候触发事件. 进入子元素时,又触发了一次事件鼠标离开子元素回到事件元素的时候又触发一次. 也就是说当鼠 ...
mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
转载：mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
关于JS下offsetLeft，style.left，以及jquery中的offset().left，css(left)的区别。
最近因为工作需要,仔细研究了一下关于JS下offsetLeft,style.left,以及jquery中的offset().left,css("left")的区别. JS下的off ...
java mouseenter_关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉 ...
jQuery中的height()、innerheight()、outerheight()的区别总结
在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...
jQuery中的$是什么意思及 $. 和 $().的区别
$就是jQuery的别称而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options)) ...

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

jquery中的mouseover、mouseout 和 mouseenter 、 mouseleave的区别相关推荐

最新文章

热门文章