解决Jquery的hover事件多次执行的有效办法

Jquery的hover事件可以做在鼠标移入对象时触发和鼠标移出对象时触发,它有两个参数,第一个参数是:over:鼠标移到元素上要触发的函数,第二个是:out:鼠标移出元素要触发的函数,其实这两个事件分别对应了mouseover事件和mouseout事件。

其实在Jquery中有两个事件:mouseenter ,mouseleave 和 mouseover ,mouseout 非常的相似。

不同之处在于前者只有在鼠标指针移入,离开被选元素时,才会触发事件。如果鼠标指针移入,离开任何子元素,后者同样会触发。

在实际编码中如果对一个标签应用了这个事件,当鼠标快速多次的移入、移出,之后移出鼠标,会发现事件仍然在反复执行,解决这个问题可以做一个小的定时器,让mouseover 事件中的具体逻辑晚200毫秒执行,

var timer = null;
$('div').hover(
function () {
var elem = $(this);
timer = setTimeout(function () {
//do something
}, 200);
}, function () {
clearTimeout(timer);
//do something
}
);

应该还有更好的方法,如果你知道,请不赐教!

转载请注明:6K & 3o » 解决Jquery的hover事件多次执行的有效办法

评论:

来了!

回复 取消回复

留下你的评论: