轻松解决鼠标移入事件多次触发

2017-12-09

在做鼠标移入触发事件时，有时会遇到事件多次触发，想尽办法，但最终的效果都不是很好。其实只要几行代码，就可以轻松解决。

为了方便大多数的前端er学习，下面以jquery来说明，原生js和其他框架的道理一样的。

正常调用jqery的hover方法

$(function(){
    $("selector").hover(function(){
        //鼠标移入执行的代码
        }, function(){
            //鼠标移出执行的代码
    })
})

这样偶尔会出现移入的事件多次触发。

解决方法

$(function(){
    var timer;
    $("selector").hover(function(){
        timer = setTimeout(function(){
            //鼠标移入执行的代码
        }, 200)
    }, function(){
        clearTimeout(timer);
        //鼠标移出执行的代码
    })
})

200的数值可以随意设置，只要设置小一点，基本上看不出延迟，但也不要过小。

代码很容易看懂，就是在鼠标移入之前加了短暂的延迟，这样就能轻松避免鼠标移入多次执行事件，以及过快重复移入鼠标导致上一事件没执行完，下一事件又开始了。