Question

Vue.js允许在元素上应用事件：

<div id="app">
   <button @click="play()">Play</button>
</div>

但是如何在window对象上应用事件？它不在DOM中。

例如：

<div id="app">
  <div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div>
</div>

在此示例中，如何在window上收听mousemove事件？

Answer 1

您应该在创建和销毁组件期间手动执行此操作

...
created: function() {
  window.addEventListener('mousemove',this.move);
},
destroyed: function() {
  window.removeEventListener('mousemove', this.move);
}
...

Answer 2

Jeff的答案很完美，应该是公认的答案。帮助了我很多！

尽管，我要补充的东西使我有些头疼。定义move方法时，如果要访问子组件上的this，则必须使用函数构造函数而不要使用ES6箭头函数，这一点很重要。 this不会传递给箭头功能。

这是我使用调用方法（此处称为keyDown而非move）的实现，包括：

export default {
  name: 'app',
  components: {
    SudokuBoard
  },
  methods: {
    keyDown: function () {
      const activeElement = document.getElementsByClassName('active')[0]
      if (activeElement && !isNaN(event.key) && event.key > 0) {
        activeElement.innerHTML = event.key
      }
    }

  },

  created: function () {
    window.addEventListener('keydown', this.keyDown)
  },

  destroyed: function () {
    window.removeEventListener('keydown', this.keyDown)
  }
}

要特别清楚，下面的方法无权访问this并且例如无法到达子组件上的data或props对象。

methods: { 
    keyDown: () => {
      //no 'this' passed. Can't access child's context 
      }

Answer 3

我发现在 Vue 3 中使用 window.addEventListener 不再像我预期的那样工作。看来该函数现在被 Vue 包装了。解决方法如下：

...
created()
{
  document.addEventListener.call(window, "mousemove", event =>
  {
    ...
  });
}
...

重要的部分是document.addEventListener.call(window，我们要做的是从addEventListener中取出未包装的document，然后在window对象上调用它。

Answer 4

您还可以使用 vue-global-events 库。

<GlobalEvents @mousemove="move"/>

它还支持事件修饰符，例如@keydown.up.ctrl.prevent="handler"。

Answer 5

这是给某人登陆这里寻找nuxt.js的解决方案的方法：

我正在为我的一个项目创建粘性标头，并且遇到使window.addEventListener工作的问题。

首先，不确定为什么，但是window.addEventListener不适用于created或beforeCreate钩子，因此我正在使用mounted。

<template lang="pug">
  header(:class="{ 'fixed-header': scrolled }")
    nav menu here
</template>

<script>
export default {
  name: 'AppHeader',

  data() {
    return { scrolled: false };
  },

  mounted() {
    // Note: do not add parentheses () for this.handleScroll
    window.addEventListener('scroll', this.handleScroll);
  },

  methods: {
    handleScroll() {
      this.scrolled = window.scrollY > 50;
    },
  },
};
</script>

在窗口上添加Vue.js事件

5 个答案: