删除切换的事件侦听器方法

Question

我有一个简单的点击功能，点击按钮时用户无法滚动。这一切正常。该按钮虽然用作切换，但在切换的 'else' 部分，即当用户再次单击时，我想删除阻止用户使用 removeEventListener(); 方法滚动的事件侦听器。我在此方法中调用的函数不起作用？

我似乎无法弄清楚问题出在哪里？

代码笔：https://codepen.io/emilychews/pen/MrBvzP

JS

var button = document.getElementById("button");

// function to be called and removed when button is clicked
function noscroll() {
    window.scrollTo(0, 0);
}

// TOGGLE EVENT LISTENER
var scrollToggle = false;

function toggleEventListener() {
    if (scrollToggle === false) {

        window.addEventListener("scroll", function(){
        noscroll();        
        }, false);

      scrollToggle = true;

    } else {

        window.removeEventListener("scroll", function(){
        noscroll();        
        }, false);

      scrollToggle = false;

    }
}

button.addEventListener("click", function() {
    toggleEventListener();
}, false)

body {margin: 0; padding: 0; height: 150vh;}

#button {font-family: arial;
  margin: 10px 0 0 30px;
  width: 100px;
  height: 50px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

<div id="button">Click Me</div>

Answer 1

我不相信你可以remove an anonymous event handler。您需要为其命名，以便它知道哪个侦听器匹配。我们可以重用您的 noscroll 函数作为我们的命名处理程序。

尝试运行代码段，您会发现它具有您预期的结果。

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

var button = document.getElementById("button");

// function to be called and removed when button is clicked
function noscroll() {
    window.scrollTo(0, 0);
}

// TOGGLE EVENT LISTENER
var scrollToggle = false;

function toggleEventListener() {
    if (scrollToggle === false) {
        window.addEventListener("scroll", noscroll, false);
        scrollToggle = true;
    } else {
        window.removeEventListener("scroll", noscroll, false);
        scrollToggle = false;
    }
}

button.addEventListener("click", function () {
    toggleEventListener();
}, false)

body {margin: 0; padding: 0; height: 150vh;}

#button {font-family: arial;
  margin: 10px 0 0 30px;
  width: 100px;
  height: 50px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

<div id="button">Click Me</div>

我们可以通过将检查 scrollToggle 的逻辑移动到处理程序本身来进一步简化它。删除 add/remove 处理程序的需要。（而且它可以保持匿名。）

var button = document.getElementById("button");

// TOGGLE EVENT LISTENER
var scrollToggle = false;

window.addEventListener("scroll", () => { 
  if (scrollToggle) {
    window.scrollTo(0, 0) 
  }
}, false);

function toggleEventListener() {
  scrollToggle = !scrollToggle;
}

button.addEventListener("click", function () {
  toggleEventListener();
}, false)

body {margin: 0; padding: 0; height: 150vh;}

#button {font-family: arial;
  margin: 10px 0 0 30px;
  width: 100px;
  height: 50px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

<div id="button">Click Me</div>

Answer 2

这个方法怎么样？

window.removeEventListener("scroll", noscroll);

删除切换的事件侦听器方法

Remove Event Listener method for a toggle

html

javascript

toggle

dom-events