无法删除 touchmove 事件 - Vue 观察者答案

【问题标题】：Can't remove touchmove event - Vue watcher无法删除 touchmove 事件 - Vue 观察者
【发布时间】：2019-05-17 07:43:07
【问题描述】：

防止在移动设备上滚动的功能：

const hideScroll = function(e) {
  e.preventDefault()
}

添加监听器：

document.body.addEventListener('touchmove', hideScroll, { passive: false })

移除监听器：

document.body.removeEventListener('touchmove', hideScroll)

在 chrome devtools 中，我清楚地看到，添加此侦听器有效，我无法使用触摸滚动，但是当我触发 removeEventListener 时，它没有被删除，我在 chrome 开发工具中看到了这个，我无法滚动使用触摸。在 Vue 观察者中使用它：

watch: {
  // hidescroll function is here: const hideScroll = function(e) {}
  chatWindow(newValue) {
    if (newValue) {
      // adding listener
    } else {
      // removing listener
    }
  }
}

【问题讨论】：

我刚用chrome和移动设备“模拟器”试了一下，效果很好。添加侦听器会阻止滚动，删除它会使滚动再次工作。
developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
您的 Vue 组件中的 window 是什么，您确定正在使用虚假值调用观察者吗？
@Seblor, chatWindow 是 data() 属性。当我点击一个按钮时，它会切换到true 或false。我已经尝试将console.log() 放在这两个州 - 他们正在成功发射。
好吧，如果它是一个方法，你不能像const hideScroll = function(e) {} 这样定义它：D。你能把你的整个组件复制到 jsfiddle 或其他地方吗

标签： javascript vue.js

【解决方案1】：

将hideScroll 函数移出你的观察者。

现在，每次触发观察者时，您都在创建新函数。函数看起来一样，但它不是附加到事件侦听器的同一个实例，这就是你不能删除它的原因。

【讨论】：