Question

我让Nuxt JS 2.9.x在通用模式下运行，并且每个页面都加载了一个组件。我正在使用两个事件侦听器：blur和focus，它们应分别运行。 blur事件侦听器应仅在切换浏览器选项卡时运行，但似乎在页面加载时运行。如何更改此设置？我的组件JS：

export default {
  mounted () {
    document.addEventListener('blur', this.blurTitle(false));
    document.addEventListener('focus', this.blurTitle(true));
  },
  methods: {

    blurTitle(location) {
      const currentPageTitle = document.title
      if (location) {
        document.title = currentPageTitle
      } else {
        document.title = 'Please come back...'
      }
    }

  }
}

我试图离开页面导航时显示一些不同的文本，但是返回时，显示原始页面标题。该站点将被编译为静态生成的站点。

Answer 1

您正在立即致电blurTitle。这个：

document.addEventListener('blur', this.blurTitle(false));

等效于此：

const fn = this.blurTitle(false)

document.addEventListener('blur', fn);

我怀疑您想要的是这样的东西：

document.addEventListener('blur', this.blurTitle.bind(this, false));

这将从this.blurTitle创建一个新函数，并且第一个参数绑定到false。

或者，如果您喜欢箭头功能：

document.addEventListener('blur', () => this.blurTitle(false));

这将创建一个包装函数，该函数将调用blurTitle，并传递false。

Nuxt JS事件监听器触发两次

1 个答案: