Question

我有三个页面home, about & details，并且在Vue keydown生命周期钩子上为每个页面添加了一个mounted事件监听器，因此每当用户单击ctrl + rightArrow时，我都会触发nextPage()方法将下一页推送到vue路由器，类似地，ctrl + leftArrow应该触发prevPage()。我正在nextPage() & prevPage()中用不同的路由在每个页面上实现相同的功能。这里的问题是，即使我没有在某些页面上添加keydown侦听器，该事件仍在触发并导航至先前加载的事件侦听器的路由，而先前的侦听器也多次触发。 / p>

export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  methods: {
    handleKeyPress(e) {
      if (e.ctrlKey && e.keyCode === 37) { // Previous page
        this.prevPage();
      } else if (e.ctrlKey && e.keyCode === 39) { // Next page
        this.nextPage();
      }
    },
    nextPage() {
      this.$router.push({ name: 'about' });
    },
    prevPage() {
      this.$router.push({ name: 'home' });
    }
  }
}

Answer 1

您可以将事件处理程序附加到document

created() {
    if (typeof window !== 'undefined') {
        document.addEventListener('keydown', this.handleKeyPress)
    }
},
beforeDestroy() {
    if (typeof window !== 'undefined') {
        document.removeEventListener('keydown', this.handleKeyPress)
    }
}

Answer 2

您正在将keydown事件绑定到窗口，并且由于您具有单页应用程序，因此即使您转到另一条路线，侦听器仍将监听窗口中的事件（因为新路线在同一窗口中）。您可以尝试使用Vue的内置event handling功能来将keydown事件绑定到每个组件的根元素，如下所示。这样，当您转到新路线时，新的侦听器将侦听新的组件。

这是将事件绑定到div根元素的方法：

<template>
  <div v-on:keydown="handleKeyPress">
    <rest of your component's template>
  </div>
</template>

您可能还需要将tabindex="0"属性添加到div根元素，以使其能够listen进行键盘事件。

添加键盘快捷键以浏览下一页和上一页

2 个答案: