Vue JS removeEventListener not working. Why?

Question

const options = {
  offset: -50
};

export default {
  name: 'BarMenu',
  data() {
    return {
      scrollingDirection: '',
    }
  },
  computed: {
    cssClasses() {
      return {
        hidden: this.scrollingDirection === 'down'
      }
    }
  },
  mounted() {
    this.onScroll();
  },
  methods: {
    scrollToIngredients() {
      return this.$scrollTo(document.getElementById('ingredients-inside-content'), 600, options);
    },
    scrollToRecipes() {
      return this.$scrollTo(document.getElementById('similar-recipes'), 600, options);
    },
    scrollToComments() {
      return this.$scrollTo(document.getElementById('comments'), 600, options);
    },
    onScroll() {
      let lastScrollTop = 0;

      const handler = () => {
        let st = window.pageYOffset || document.documentElement.scrollTop;
        if (st > lastScrollTop) {
          this.scrollingDirection = 'down';
        } else {
          this.scrollingDirection = 'up';
        }
        lastScrollTop = st <= 0 ? 0 : st;
      };

      window.removeEventListener("scroll", handler, false);
      window.addEventListener("scroll", handler, false);
    }
  },
}

This line is not working, why? window.removeEventListener("scroll", handler, false); I tried all approaches: arrow function, function declaration, etc. But that event listener is not removing at all.

You remove the handler and in the next line you add it again. Is that really what you want? Please be more specific. — str
– str, Commented Nov 22, 2019 at 11:40
handler won't be the same handler every time scroll is run - therefore if your code is trying to remove the old handler and replace it, then it won't work - you could make handler a method instead (make it an ordinary function though, not an arrow function - though, why you'd want to change the handler to the same code every time you run onScroll is a mystery — Bravo
– Bravo, Commented Nov 22, 2019 at 11:56
I want to remove this event listener, when component destroyed. I tried to perform it inside beforeDestroy lifecycle hook, but its not working. — Eugene Yermolaev
– Eugene Yermolaev, Commented Nov 22, 2019 at 12:40

Francisco Rodeño Sanchez · Accepted Answer · 2021-09-30 12:20:15Z

2

I had a similar problem, in the end, I solved it with another alternative, adding the once option in the parameters of the addEventListener function that removes it automatically and it was valid for me, in the case can help you check the parameters

edited Sep 30, 2021 at 12:20

answered Oct 25, 2020 at 12:35

Francisco Rodeño Sanchez

7371 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Terry · Accepted Answer · 2019-11-22 13:27:56Z

It seems like you've slightly overcomplicated your logic. Like what Bravo has mentioned in the comment, you will need a static reference to the handler for it to be unbound: you can simply declare it as a component method. Here's how you can update your code:

Use onScroll() method to handle the logic on scroll. You simply pass this method reference in your add/remove event listener
You should cache your lastScrollTop as part of the component data. 3, Then, you simply add the scroll event listener in the mounted() lifecycle hook, and remove it in the destroyed() lifecycle hook.

See updated code below:

const options = {
  offset: -50
};

export default {
  name: 'BarMenu',
  data() {
    return {
      scrollingDirection: '',
      lastScrollTop: 0,
    }
  },
  computed: {
    cssClasses() {
      return {
        hidden: this.scrollingDirection === 'down'
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll, false);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll, false);
  },
  methods: {
    scrollToIngredients() {
      return this.$scrollTo(document.getElementById('ingredients-inside-content'), 600, options);
    },
    scrollToRecipes() {
      return this.$scrollTo(document.getElementById('similar-recipes'), 600, options);
    },
    scrollToComments() {
      return this.$scrollTo(document.getElementById('comments'), 600, options);
    },
    onScroll() {
      let st = window.pageYOffset || document.documentElement.scrollTop;
      if (st > this.lastScrollTop) {
        this.scrollingDirection = 'down';
      } else {
        this.scrollingDirection = 'up';
      }
      this.lastScrollTop = st <= 0 ? 0 : st;
    }
  },
}

Collectives™ on Stack Overflow

Vue JS removeEventListener not working. Why?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related