通过添加/删除 EventListener 切换文档 touchmove on/off

Question

我请求实现 lock/unlock 移动设备上的正文滚动功能，如下所示：

var myObj = {
 disableBodyScroll: function() {
    document.querySelector('body').addEventListener("touchmove", function(e) {
      e.preventDefault();
      return false;
    }, 
    {passive: false}
    ); 
  },
  enableBodyScroll: function() {
    document.querySelector('body').removeEventListener("touchmove", function(e) {
      e.preventDefault();
      return false;
    }, 
    {passive: false}
    ); 
  }
}

当我执行 myObj.disableBodyScroll() 时，它工作正常。但是 myObj.enableBodyScroll() 它没有，我的卷轴保持锁定状态...

有什么可能的原因吗？

参考：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Answer 1

我认为是因为你没有传递相同的监听函数。您的启用和禁用函数都会创建一个新的 eventListener 函数。所以 removeEventListener 找不到 eventListener 引用

试试这个：

var myObj = {
        handleTouchMove: function (e) {
            e.preventDefault();
            return false;
        },
        disableBodyScroll: function() {
            document.querySelector('body').addEventListener("touchmove", myObj.handleTouchMove, {passive: false}
            );
        },
        enableBodyScroll: function() {
            document.querySelector('body').removeEventListener("touchmove", myObj.handleTouchMove, {passive: false}
            );
        }
    }

通过添加/删除 EventListener 切换文档 touchmove on/off

Toggling document touchmove on/off by adding / removing EventListener

javascript

touch

addeventlistener

dom-events