removeEventListener 函数在 javascript 中不起作用

Question

所以我有 3 个带有 class '.tile' 的游戏图块 div，在选择一个单元后，我将循环遍历图块以添加一个事件侦听器，以便在将鼠标悬停在它们上方时创建悬停效果这样他们就知道可以将设备放在哪里。

这第一部分工作正常，虽然我怀疑它可能很混乱，所以我添加了一个带有 class '.reset' 的重置按钮，以在按下时删除事件 handlers/hover 效果重新开始。

然而，重置按钮 removeEventListeners 不起作用，即使它具有相同的参数。悬停效果仍然有效。我也尝试过使用和不使用 'true' 捕获参数，这似乎无关紧要。感谢任何帮助。

    const p1InfP = document.getElementById('p1InfP')

    p1InfP.addEventListener('click', ()=> {
        p1InfP.style.border = "1px solid black"
        place(tiles)
    })

    const tiles = document.querySelectorAll('.tile')

    function place(array){
        for(let i=0; i<array.length;i++){
        tiles[i].addEventListener('mouseover', () => {tiles[i].style.border = "1px solid #0000FF"},true)
        tiles[i].addEventListener('mouseout', () => {tiles[i].style.border = "1px solid transparent"},true)
        }
    }

    function remove(array){
        for(let i=0; i<array.length;i++){
        tiles[i].removeEventListener('mouseover', () => {tiles[i].style.border = "1px solid #0000FF"},true)
        tiles[i].removeEventListener('mouseout', () => {tiles[i].style.border = "1px solid transparent"},true)
        }
    }

    const reset = document.getElementById('reset')
    
    reset.addEventListener('click', ()=> {
        p1InfP.style.border = "1px solid transparent"
        remove(tiles)
    })

Answer 1

removeEventListener 应该删除的侦听器函数必须相同，而不是相同的、重新定义的函数。

const p1InfP = document.getElementById('p1InfP')

p1InfP.addEventListener('click', () => {
  p1InfP.style.border = "1px solid black"
  place(tiles)
})

const tiles = document.querySelectorAll('.tile')

const onMouseoverEvent = e => {
  e.currentTarget.style.border = "1px solid #0000FF";
}

const onMouseoutEvent = e => {
  e.currentTarget.style.border = "1px solid transparent";
}

function place(array) {
  for (let i = 0; i < array.length; i++) {
    tiles[i].addEventListener('mouseover', onMouseoverEvent, true)
    tiles[i].addEventListener('mouseout', onMouseoutEvent, true)
  }
}

function remove(array) {
  for (let i = 0; i < array.length; i++) {
    tiles[i].removeEventListener('mouseover', onMouseoverEvent, true)
    tiles[i].removeEventListener('mouseout', onMouseoutEvent, true)
  }
}

const reset = document.getElementById('reset')

reset.addEventListener('click', () => {
  p1InfP.style.border = "1px solid transparent"
  remove(tiles)
})

<div id="p1InfP">foo</div>

<div class="tile">bar</div>
<div class="tile">bar</div>
<div class="tile">bar</div>

<div id="reset">baz</div>

removeEventListener 函数在 javascript 中不起作用

removeEventListener function not working in javascript

javascript

events

removeeventlistener