代码之家 › 专栏 › 技术社区 › pjk_ok

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

toggle dom-events html javascript

pjk_ok · 技术社区 · 6 年前

我有一个简单的点击功能,当点击按钮时,用户无法滚动。一切正常。该按钮起到切换的作用,在切换的“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>

2 回复 | 直到 3 年前

Devan Buggay 6 年前

我不相信你能 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 进入处理程序本身。不再需要添加/删除处理程序。(它可以保持匿名。)

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)

正文{边距:0;填充:0;高度:150vh;}

#按钮{字体系列:arial;
裕度:10px 0 0 30px;
宽度:100px;
高度:50px;
背景:红色;
显示:flex;
对齐内容:居中;
对齐项目:居中;
颜色:白色;
光标:指针;
}

<div id=“按钮”>单击“我”</div>

user4723924 6 年前

这种方法怎么样?

window.removeEventListener("scroll", noscroll);