Слушатель событий Nuxt JS срабатывает дважды

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.