Javascript 当鼠标未移动时隐藏div'；t在x时间内鼠标移动，vue.js

早些时候我也问过类似的问题，但我已经被这个问题困扰了一段时间

我有一个div，它在某些事件上以v形显示，例如当鼠标悬停在

div1

上并单击

div2

时。我想让这个div消失，当鼠标在一定时间内没有接触它时，比如说三秒钟

我的问题是我不能使用v-on:mouseleave（因为div出现时没有鼠标在上面），所以我需要一些东西，在一定的延迟后切换div上的v-show。我缺少什么吗？我应该用什么

---

谢谢

您可以在组件渲染函数（或任何其他函数）中设置超时这将在预定义的时间段后将

this.visible=true

更改为

this.visible=false

。

最简单的方法是使用组件并在已安装的挂钩中添加事件侦听器，该挂钩使用超时设置附加到

v-show

的标志，因此：

Vue.component('my-deiv', {
  template: `<template id="block"><div v-show="show">A div</div></template>`,
  mounted(){
    this.$el.addEventListener('mousemove', () => {
      setTimeout( () => {
        this.show = false;
      }, 3000)
    })
  },
  data(){
    return{
      show: true
    }
  }
});

---

JSFiddle：啊，这就是我想要使用的，谢谢！我想知道，是否有可能检查鼠标是否没有悬停在div上？我知道我可以检查mouseleave等，但我需要能够看到有问题的div在一定时间内没有悬停。@akre_11您可以将超时存储在变量中，并在鼠标输入时重置/取消超时。谢谢！这就是我现在所做的，但是我在使用clearTimeout（）时遇到了问题；。在mouseover上，我试图执行

v-on:mouseover=“clearTimeout（this.timer）

，其中

timer

是我存储超时的变量，但它似乎不想清除它。我遗漏了什么？太棒了！这是我将要使用的东西，谢谢你。不过，当鼠标移动到div上时，它会隐藏div。有没有办法代替检查div是否被鼠标移动了一段时间，using setTimeout？谢谢。因为这是一项学校作业，我没有改变我的整个结构，因为我必须使它符合规范。我开始让它工作，只需使用v-on:mouseover和v-on:mouseleave函数，但我目前在clearTimeout（）方面有问题。因此，我的超时存储在

timer

中。因此，例如，当我将鼠标移到上方时，我尝试执行

v-on:mouseover=“cleartimout（timer）“

但它似乎不起作用。这个.timer也不工作，它只是不想清除它。我遗漏了什么？另外--我想将setTimeout存储在

timer

中，但当将其放入数据时，它似乎不起作用，因为我有剩余的全局变量？我试图使它成为一个全局变量，但它似乎不喜欢这样。。。我可以在每个方法中本地存储它，但我认为这可能是我使用

clearTimeout

的问题的根源！

Vue.component('block', {
  template: "#block",
  mounted() {
    this.timer = null;

    this.$el.addEventListener('mousemove', () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.show = false;
      }, 3000)
    })

    this.$el.addEventListener('mouseleave', () => {
      clearTimeout(this.timer);
    })
  },
  data() {
    return {
      show: true
    }
  }
})