Question

我尝试使用console.log对我的代码进行故障排除，并查看它是否将运行，但似乎它只是绕过了removeEventListeners。我曾经有同龄人检查我的代码，却不明白问题出在哪里。 Javascript：

function useCodelock(){
if (one == 1 && nine == 1 && five == 1 & seven == 1 && two == 1 && ninetwo == 1){
    document.getElementById("main-view").style.backgroundImage="url('images/gray.png')";
    document.getElementById("1").removeEventListener("click", removeImg);
    document.getElementById("6").removeEventListener("click", removeImg);
    document.getElementById("9").removeEventListener("click", removeImg);
    document.getElementById("12").removeEventListener("click", removeImg);
    document.getElementById("14").removeEventListener("click", removeImg);
    document.getElementById("21").removeEventListener("click", removeImg);
    document.getElementById("34").removeEventListener("click", removeImg);
    document.removeEventListener("click", removeImg);
}else{
    alert("You Must Find The Code To Use The Lock.");
}
}

HTML：

<div class="main-view-cont">
        <div class="main-view" id="main-view">
            <div class="grid-item"><img src="" id="1" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="images/9.png" id="6" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="images/5.png" id="9" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="" id="12" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="images/keypad.png" id="14" onclick="useCodelock()"></div>
            <div class="grid-item"><img src="" id="21" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item"><img src="" id="34" onclick="removeImg(this)" class="opacity25"/></div>
            <div class="grid-item2"><img src="" id="i1" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i2" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i3" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i4" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i5" class="opacity1"/></div>
            <div class="grid-item2"><img src="" id="i6" class="opacity1"/></div>
        </div>
    </div>

Answer 1

removeEventListener只能删除与addEventListener添加的侦听器。如果使用onclick属性，则需要分配给该属性。

function useCodelock() {
  if (one == 1 && nine == 1 && five == 1 & seven == 1 && two == 1 && ninetwo == 1) {
    document.getElementById("main-view").style.backgroundImage = "url('images/gray.png')";
    document.getElementById("1").onclick = null;
    document.getElementById("6").onclick = null;
    document.getElementById("9").onclick = null;
    document.getElementById("12").onclick = null;
    document.getElementById("14").onclick = null;
    document.getElementById("21").onclick = null;
    document.getElementById("34").onclick = null;
    document.onclick = null;
  } else {
    alert("You Must Find The Code To Use The Lock.");
  }
}

Answer 2

您需要通过将onclick函数设置为null而不是使用removeEventListener来取消绑定onclick函数。

function myFunction() {
  console.log('unbind me');
  // if you want to unbind the function
  document.getElementById("button").onclick = null;
  // if you want to assign a new unction.
  document.getElementById("button").onclick = newFunction;
  
}

function newFunction() {
  console.log("hello new");
}

<button id="button" onclick="myFunction()">
  unbind me
</button>

您正试图删除不存在的事件监听器，因为addEventListener从未设置它。您在DOM上设置了onclick侦听器，因此需要通过将该函数设置为null来取消绑定该函数。

Answer 3

像removeListener("click", myFunc, true);这样的调用只会删除使用addListener("click", myFunc, true);添加的监听器。这是一个示例：

var flag = true;

function toggle() {
  if (flag) document.getElementById("1").addEventListener("click", removeImg);
  else document.getElementById("1").removeEventListener("click", removeImg);
  flag = !flag;
}

function removeImg() {
  console.log("Clicked");
}

document.getElementById("toggle").addEventListener("click", toggle);

<button id="1">Test</button>
<button id="toggle">Toggle</button>

以下是您仍然需要检查的事情列表：

在addEventListener中使用与removeListener中相同的功能（() => {}与() => {}不同）
使用相同的useCapture值（都必须为true或都必须为false）
检查是否从正确的元素中删除了侦听器
检查侦听器仅添加到元素一次

Javascript“ removeEventListener”不起作用

3 个答案: