Question

我遇到了JQuery mouseout函数和setTimeout的问题。

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

如果我使用下面的代码，只有在我离开该元素时才会调用goBack函数：

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

但如果我取消注释超时功能（这就是我想要实现的功能），即使我不离开那个元素，也会调用goBack函数。

有任何帮助或建议可以避免此问题吗？

Answer 1

这是因为事件冒泡所以请使用mouseenter和mouseleave而不是鼠标悬停和鼠标移动或使用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事件仅在鼠标进入其绑定的元素而不是后代时触发其处理程序。因此，在此示例中，处理程序在鼠标进入外部元素时触发，而不是内部元素。

更新了，这里有超时问题，您需要清除在更改鼠标中心背景之前的超时时间

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>

带有mouseout函数的JQuery超时问题

1 个答案: