Vue JS removeEventListener 不起作用。为什么？

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);

    }

  },

}

这条线不工作，为什么？window.removeEventListener("scroll", handler, false); 我尝试了所有方法：箭头函数、函数声明等。但是那个事件监听器根本没有删除。

Answer 1

我有一个类似的问题，最后我用另一种方法解决了它once，在addEventListener函数的参数中添加自动删除它的选项并且它对我有效，以防万一可以帮助您检查参数

Answer 2

看起来你的逻辑有点过于复杂了。就像 Bravo 在评论中提到的那样，您需要对处理程序的静态引用才能解除绑定：您可以简单地将其声明为组件方法。以下是更新代码的方法：使用onScroll()方法来处理滚动的逻辑。您只需在添加/删除事件侦听器中传递此方法引用您应该将您的缓存lastScrollTop作为组件数据的一部分。3，然后，您只需在mounted()生命周期钩子中添加滚动事件监听器，并在destroyed()生命周期钩子中将其移除。请参阅下面的更新代码：const options = {&nbsp; offset: -50};export default {&nbsp; name: 'BarMenu',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; scrollingDirection: '',&nbsp; &nbsp; &nbsp; lastScrollTop: 0,&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; cssClasses() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; hidden: this.scrollingDirection === 'down'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; window.addEventListener("scroll", this.onScroll, false);&nbsp; },&nbsp; destroyed() {&nbsp; &nbsp; window.removeEventListener("scroll", this.onScroll, false);&nbsp; },&nbsp; methods: {&nbsp; &nbsp; scrollToIngredients() {&nbsp; &nbsp; &nbsp; return this.$scrollTo(document.getElementById('ingredients-inside-content'), 600, options);&nbsp; &nbsp; },&nbsp; &nbsp; scrollToRecipes() {&nbsp; &nbsp; &nbsp; return this.$scrollTo(document.getElementById('similar-recipes'), 600, options);&nbsp; &nbsp; },&nbsp; &nbsp; scrollToComments() {&nbsp; &nbsp; &nbsp; return this.$scrollTo(document.getElementById('comments'), 600, options);&nbsp; &nbsp; },&nbsp; &nbsp; onScroll() {&nbsp; &nbsp; &nbsp; let st = window.pageYOffset || document.documentElement.scrollTop;&nbsp; &nbsp; &nbsp; if (st > this.lastScrollTop) {&nbsp; &nbsp; &nbsp; &nbsp; this.scrollingDirection = 'down';&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.scrollingDirection = 'up';&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; this.lastScrollTop = st <= 0 ? 0 : st;&nbsp; &nbsp; }&nbsp; },}