CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
Ryan H
Ryan H

Reputation: 2955

Nuxt JS event listener fires twice

I have Nuxt JS 2.9.x running in universal mode with a component loaded into every page. I'm using two event listeners: blur and focus, which should both run separately. The blur event listener should only run when the browser tab is switched, but appears to be running on page load... How could I change this? My component 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...'
      }
    }

  }
}

I'm trying to display some different text when navigating away from the page, but when returning, display the original page title. The site will be compiled into the statically generated site.

Upvotes: 2

Views: 1222

Answers (1)

skirtle
skirtle

Reputation: 29092

You're calling blurTitle immediately. This:

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

is equivalent to this:

const fn = this.blurTitle(false)

document.addEventListener('blur', fn);

I suspect what you want is something like this:

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

This creates a new function from this.blurTitle with the first argument bound to false.

Or if you prefer arrows functions:

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

This creates a wrapper function that will call blurTitle, passing false.

Upvotes: 1

Related Questions