JavaScript "removeEventListener"不工作

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.");
  }
}