需要时禁用 addEventListener 函数

Question

这个功能需要一段时间。但是当任务完成后我需要禁用它，在点击 'board' 之后它就不起作用了。

board.addEventListener('click', event => {
    if (event.target.classList.contains('circle')) {
        score++
        event.target.remove()
        createRandomCircle()
    } else if (!event.target.classList.contains('circle')) {
        fault++
    }
})

//Here I want to deactivate this event listener

Answer 1

我会调用一个处理函数 returns 一个新的命名函数 (a closure) 作为监听器。然后您可以完成您的任务，并在任务完成时删除侦听器。

const board = document.querySelector('#board');

board.addEventListener('click', handler(), false);

function handler() {

  // This is the function the listener uses
  return function listener(e) {
    console.log(e.target);
    console.log('Task one');
    console.log('Task two');
    board.removeEventListener('click', listener);
    console.log('The button no longer works.');
  }

}

<button id="board">Board</button>

需要时禁用 addEventListener 函数

Disable an addEventListener function when needed

javascript

addeventlistener