一、最简单的鼠标事件–进入与离开
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小,如下图:
那么如果我们给父级div1绑定鼠标进入和离开事件,使得父级div1的位置上下发生变化不给子级div2绑定相关事件,分别用以上鼠标事件来绑定,会有什么现象呢?
先看代码(在这里我只呈现jQuery代码和网页body部分,至于style大家可以自己设置):
1.使用mouseover()和mouseout()
执行代码以后,可以发现当鼠标进入div1范围时候,div1会带着div2整体下移,鼠标离开div1范围时,div1会带着div2整体上移,即恢复原来的位置。但是,请留心一下,如果把鼠标直接放到div2的范围内,然后在div2和div1范围内来回移动鼠标,你就会发现,div1却依然会上下移动,这就违背了我们设计的原则,本来不管是div1还是div2的边界都是存在于div1里面的,但是为何我鼠标在div1里面移动,只不过是在子级和父级标签之间移动,却会出现这种类似鼠标进出div1边界所造成的现象,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。这就是mouseover()和mouseout()事件会导致事件重复触发的缺点
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var $box = $('.box');
$box.mouseover(function () {
$box.animate({'margin-top':100});
})
// 鼠标离开时让它回到原本的位置
$box.mouseout(function () {
$box.animate({'margin-top':50});
})
})
</script>
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()带来的问题,希望引以为戒,不要以为它们的作用和效果都是一样的哦!面试的时候小心这个陷阱!