JQuery超时问题与mouseout函数

JQuery timeout issue with mouseout function

本文关键字：mouseout 函数 问题 超时 JQuery      更新时间：2023-09-26

我有一个问题与JQuery mouseout函数和setTimeout。

我想要实现的是，当我悬停一个元素时，它会改变背景。当我离开该元素时(因此触发了mouseout)，背景应该在1秒后恢复到原始状态。

如果我使用下面的代码，goBack函数只在我离开该元素时被调用:

.mouseover(function(){
    changeBackground();
})
.mouseout(function(){
    //setTimeout(function() {
    goBack();
    //}, 1000);
});

但是如果我取消超时函数的注释(这就是我想要实现的)，即使我不离开该元素，也会调用goBack函数。

有什么帮助或建议来避免这个问题吗?

这是因为事件冒泡所以使用mouseenter和mouselleave而不是mouseover和mouseout或者使用hover，比如

.hover(function(){
    changeBackground();
},function(){
    setTimeout(function() {
       goBack();
    }, 1000);
});

或

.mouseenter(function(){
    changeBackground();
})
.mouseleave(function(){
    setTimeout(function() {
       goBack();
    }, 1000);
});

从jQuery.mouseenter的文档，

mouseenter事件的处理方式与mouseover不同事件冒泡。如果在本例中使用了mouseover，那么当将鼠标指针移动到Inner元素上，则处理程序将为触发。这通常是不受欢迎的行为。另一方面，mouseenter事件仅在鼠标进入其绑定的元素时触发其处理程序，而不是进入后代元素。因此，在本例中，当鼠标进入Outer元素时触发处理程序，而不是进入Inner元素。

更新，这里有超时的问题，你需要清除超时，这是在改变背景的鼠标输入，如

function changeBackground() {
  $('#content').addClass('yellow');
}
function goBack() {
  $('#content').removeClass('yellow');
}
var t=null;//clear timeout variable
$(function() {
  $('#content').mouseenter(function() {
    clearTimeout(t);// clear previous timeouts
    changeBackground();
  }).mouseleave(function() {
    t=setTimeout(function() { //set new timeouts
      goBack();
    }, 1000);
  });
});
#content {
  background-color: #eee;
  padding: 20px;
  cursor: pointer;
}
.yellow {
  background-color: #ffff00 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  Lorem ipsum doner inut
</div>

相关文章：