removeEventListener () не работает для события, добавленного в файл HTML5 - PullRequest
Новая
       15

removeEventListener () не работает для события, добавленного в файл HTML5

0 голосов
/ 02 апреля 2019

Я пытаюсь удалить прослушиватель событий, установленный для кнопки, которую я настраиваю в файле HTML5, но, похоже, он не удаляется.

Файл HTML5: 

<!DOCTYPE html>
<html>
<head>
    <script src="lab5v1js.js"></script>
</head>
<body onload="loadPuzzle()">
<table>
    <tbody>
       ..........................
    </tbody>
</table>
<button id="button" onmousedown="solve();" onmouseup="checkIfSolved()">SOLVE!</button>
</body>
</html>

JS-файл: 

function checkIfSolved() {
    .......................
    //here it is ok, so remove handlers
    document.getElementById("button").removeEventListener("mousedown", solve);
    document.getElementById("button").removeEventListener("mousedown", checkIfSolved);

    alert("SOLVED!");
}

Я пытался напечатать результат document.getElementById ("button") до и после попытки удалить прослушиватели событий, но, похоже, эффекта нет (онине удаляются) ...

Что может быть причиной этого?

1 Ответ

0 голосов
/ 02 апреля 2019

Вам нужно очистить метод, а не удалить слушателя 

const solve = () => console.log('solve test');

function checkIfSolved() {

    //here it is ok, so remove handlers
    document.getElementById("button").onmousedown = undefined;

    alert("SOLVED!");
}
<table>
    <tbody>
       ..........................
    </tbody>
</table>
<button id="button" onmousedown="solve();" onmouseup="checkIfSolved()">SOLVE!</button>
</body>

Если вы хотите использовать прослушиватели событий: 

const solve = () => console.log(`solve test - ${Date.now()}` );
function checkIfSolved() {

    document.querySelector("#button").removeEventListener('mousedown', solve);
    alert("SOLVED!");
}

document.addEventListener('DOMContentLoaded', () => {
  // Add our click
  let btn = document.querySelector('#button');
  btn.addEventListener('mousedown', solve);
  btn.addEventListener('mouseup', checkIfSolved); 
});
<table>
    <tbody>
       ..........................
    </tbody>
</table>
<button id="button">SOLVE!</button>
</body>
...