Vue removeEventListener 不生效?

作者: Lynan 分类: Vue.js 发布时间: 2019-07-03 11:42

有时我们会在页面进入时添加一个事件监听器用来监听dom的变化执行对应的操作。
例如:
针对某些版本的iOS设备在输入法聚焦失焦时window的滚动高度不会重新变化,导致页面布局出现问题,下面我使用监听失焦事件focusout来重置窗口滚动高度来处理此问题。
-1 在App.vue的mounted()勾子中添加

if (this.$deviceOSName === 'ios') { //$deviceOSName是本项目中判断UA的全局属性。
  document.addEventListener('focusout', this.handleWindowResizeError)
}

-2 methods()中添加上面的handleWindowResizeError()

handleWindowResizeError() {
  window.scrollTo(0, 0)
}

-3 在实例被销毁时移除这个eventListener

destroyed() {
  document.removeEventListener('focusout', this.handleWindowResizeError)
},

几点需要注意的

  1. focusout是iOS设备特有的事件
  2. addEventListener和removeEventListener的第二个参数不可以带(),如果写成this.handleWindowResizeError()它会在addEventListener和removeEventListener时被执行,而不是在监听事件中执行
  3. addEventListener和removeEventListener的第二个参数如果直接写成document.addEventListener('focusout', function(){ window.scrollTo(0, 0) })document.removeEventListener('focusout', function(){ window.scrollTo(0, 0) })可以正常地添加eventListener,但是removeEventListener将无法生效。同理使用箭头函数也不可以。

发表评论

电子邮件地址不会被公开。 必填项已用*标注