Question

我有一个请求，要求为移动设备上的身体滚动实现锁定/解锁功能，如下所示：

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()却没有，并且我的滚动条保持锁定状态...

任何可能的原因？

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

Answer 1

我认为这是因为您没有传递相同的侦听器功能。您的enable和disable函数会创建一个新的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

1 个答案: