Home > OS >  How to remove an eventListener (window.removeEventListener) in Vue 2, when certain condition is met
How to remove an eventListener (window.removeEventListener) in Vue 2, when certain condition is met

Time:04-16

Code :-

<template>
// html
</template>

<script>
import _ from "lodash";

 data() {
    return {
      renderComponent: false,
    };
  },
 watch: {
// when this property is true, want to stop calling scroll event with this.onScroll method
    renderComponent(val) {
      if(val === true) {
        console.log("////////I am removing you");
        window.removeEventListener('scroll', this.onScroll);
      }
    }
  },
 methods: {
    onScroll() {
      console.log("I am called////////");
      let similarTickerHeading = this.$refs.similarTicker;
      if(similarTickerHeading) {
       let margin = similarTickerHeading.getBoundingClientRect().top;
       let innerHeigth = window.innerHeight;
        console.log("Window Screen", innerHeigth);
        console.log("Component located", margin);
       
// when this condition is true, I want to stop listening for the scroll event with this (onScroll method)
       if(margin - innerHeigth < 850) {
          console.log("I should start loading the actual component");
          this.renderComponent = true;
          this.$vs.loading.close("#loader-example > .con-vs-loading");
          // removing eventListener for scrolling with the onScroll Method
          window.removeEventListener('scroll', this.onScroll);
       }
      }
    }
  },
  mounted() {
    this.renderComponent = false;
     this.$vs.loading({
        container: "#loader-example",
        type: "point",
        scale: 0.8,
      });

    this.$nextTick(function() {
      window.addEventListener('scroll', _.throttle(this.onScroll,250));
      this.onScroll();
    })
  },
 beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  },
</script>

In the above code, I want to stop listening for the scroll event with onScroll method when my if block in onScroll method becomes true. But, still, the onScroll method gets called whenever I scroll even though when I tried to remove the eventListener. I even created a watcher to remove the eventListener, yet the method keeps on getting called on scroll.

How can I remove the scroll eventListener with onScroll method ?

UPDATE : If I remove throttling and cut out _.throttle, the scroll event does get removed. Due to the use of _.throttle, I cannot remove the scroll event listener.

CodePudding user response:

Add this in watch:

window.removeEventListener('scroll', this.onScroll,true);

CodePudding user response:

The function reference passed to window.addEventListener() must be the same reference passed to window.removeEventListener(). In your case, there are two different references because you've wrapped one of them with _.throttle().

Solution

Cache the function reference passed to addEventListener() so that it could be used later for removeEventListener():

export default {
  mounted() {
                         
  • Related