Исчезновение курсора мыши при бездействии

#javascript #vuejs #cursor #mouse_event

Подскажите как можно сделать исчезновение курсора мыши, если пользователь не двигает
мышью более 3 секунд. 

Если пользователь начинает двигать мышью, то показать курсор.



new Vue({
  el: "#app",
  data: {
    controlsOpacity: 1,
    isFullscreen: false,


  },
  methods: {
    fullscreen() {
      conosole.log(this.isFullscreen);
      this.isFullscreen == false ? this.isFullscreen = true : this.isFullscreen = false;
    },
    onMouseMove() {
      this.showControls();
      if (this.mouseWait == undefined)
        clearTimeout(this.mouseWait);

      this.mouseWait = setTimeout(() => {
        this.middleControlsOpacity = 0;
        if (this.isFullscreen)
          this.hideControls();
      }, 5000);
    },
    showControls() {
      this.middleControlsOpacity = 1;
      this.controlsOpacity = 1;
      this.$parent.$refs.main.style.cursor = 'default';
    },
    hideControls() {
      this.middleControlsOpacity = 0;
      this.controlsOpacity = 0;
      if (this.isFullscreen) {
        if (this.$parent.$refs.main.mousemove) {
          console.log('move');
        }
        this.$parent.$refs.main.style.cursor = 'none';
      }
    },

  },
  mounted() {

    this.$refs.main.addEventListener('mousemove', this.onMouseMove);
    this.$refs.main.addEventListener('mouseenter', this.showControls);
    this.$refs.main.addEventListener('mouseleave', this.hideControls);

  }

})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}


  

    
    
  




    

Ответы

Ответ 1

Успеть, пока вопрос не закрыли. Пример, все таки применительно к Vue, чтобы лишних
слушателей addEventListener не добавляли. В снипет не вставлял, все равно не позволит
перейти в полный экран.


    

        

            Элементы интерфейса в кадре
            
        
    
    
Закадровые злементы интерфейса.









Ответ 2

~function () {
  var t;

  window.addEventListener('mousemove', () => {
    if (t) {
      document.documentElement.classList.remove('no-cursor')
      clearTimeout(t)
      t = 0
    }

    t = setTimeout(() => document.documentElement.classList.add('no-cursor'), 3000)
  });
}()
.no-cursor, .no-cursor * {
  cursor: none !important;
}


Ответ 3

Примерно вот так :



let to = 3000, ts = 0;

addEventListener('mousemove', () => {
  ts = Date.now();
  area.style.cursor = "default";
});

setInterval(() => {
  if (Date.now() - ts > to)
    area.style.cursor = "none";
}, 99)
body, #area{width:100vw;height:100vh;overflow:hidden;margin:0}