我正在尝试从HTML列表中删除一个事件监听器,我无法让它工作。下面显示的代码不会删除侦听器。
if(moveChecker===8){
for(var i=0; i<card.length;i++){
card[i].removeEventListener('click', function(e){
cardChecker(e);
}, true);
}
}
else{
for(var i=0; i<card.length;i++){
card[i].addEventListener('click', function(e){
e.preventDefault();
cardChecker(e);
if (moves>2){
if(moves>4){
moveHTML.previousElementSibling.innerHTML = '<p>☆</p>';
}
else {moveHTML.previousElementSibling.innerHTML = '<p>☆ ☆</p>';}
}
}, true);
}
}
我认为这是由于我使用匿名函数。但是,当我尝试定义它时(例如):
let listener = function(e){
e.preventDefault();
cardChecker(e);
if (moves>2){
if(moves>4){
moveHTML.previousElementSibling.innerHTML = '<p>☆</p>';
}
else {moveHTML.previousElementSibling.innerHTML = '<p>☆ ☆</p>';}
}
}
if(moveChecker===8){
for(var i=0; i<card.length;i++){
card[i].removeEventListener('click', listener(e), true);
}
}
else{
for(var i=0; i<card.length;i++){
card[i].addEventListener('click', listener(e), true);
}
}
然后我不断收到一条错误,说明'e未定义'。这发生在addEventListener行上。
要删除事件侦听器,您需要对最初调用addEventListener
的函数进行静态引用。使用removeEventListener('click', function() ...
定义了一个全新的函数(显然不是add
ed)预先定义处理程序,然后将其作为参数传递给addEventListener
和removeEventListener
:
function theListener(e) {
e.preventDefault();
cardChecker(e);
if (moves > 2) {
if (moves > 4) {
moveHTML.previousElementSibling.innerHTML = '<p>☆</p>';
} else {
moveHTML.previousElementSibling.innerHTML = '<p>☆ ☆</p>';
}
}
}
if (moveChecker === 8) {
for (var i = 0; i < card.length; i++) {
card[i].removeEventListener('click', theListener, true);
}
} else {
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', theListener, true);
}
}