单击后移除类名上的EventListener

Question

我正试图编写一些Javascript来获取数组中所有带有class的元素上的click事件。一切都很好，但我只需要它不可点击，直到满足klikej()函数中的第二个条件。一旦点击事件触发，那么具有该类的项目就不应该是可点击的。我尝试过使用removeEventListener和/或使用PreventDefaults()处理它，但都不起作用。我只需要使用普通的Javascript，而不需要jQuery或其他任何东西。你能帮帮我吗？

poleRandomKaret.forEach(karta => {
document.querySelectorAll(`.${karta}`).forEach(element => {
element.addEventListener('click', event => {
console.log("klik");
klikej(event, element);
});
});
});

function klikej(event, element) {
let kliknuteKarty = document.querySelectorAll('[data-ovoce]');
if (kliknuteKarty.length < 2) {
element.setAttribute('data-ovoce', 'otoceno');
}
kliknuteKarty = document.querySelectorAll('[data-ovoce]');
if (kliknuteKarty.length === 2) {
kliknuteKarty[0].className === kliknuteKarty[1].className ? console.log("yes") : console.log("nope");
kliknuteKarty.forEach(element => {
element.removeAttribute("data-ovoce");
});
}
}

编辑：在满足klikej()功能中的第二个条件之前，不应单击该项目。我正在尝试用香草JS做内存游戏。函数klikej()将数据属性设置为一个项目，一旦有两个项目具有相同的数据属性，它就会在控制台中打印"是"。如果它们是两个不同的数据属性，则需要再次可点击。

Answer 1

如果删除事件侦听器，并且需要再次侦听，则需要再次添加它或使用其他内容进行侦听。如果我需要识别某个东西是否被点击，我会在侦听器回调中向元素添加属性，因此类似于：

// before anything else we check if it was clicked before
if (element.clicked) {
// do your magic when element was already clicked
} else {
// do different magic with not yet opened element here
}
// after you did everything needed
// set the clicked attribute to true or false (if you need "unclick" it)
element.clicked = true;

这不是对你问题的直接回答，但希望是对可能解决方案的另一种看法——如果我理解正确，你可以在点击时做一些事情，在还没有点击时做其他事情，在这里你可以控制这两种情况。

Answer 2

您可以添加一个名为once的选项作为addEventListener的第三个参数，使事件侦听器执行一次。

element.addEventListener('click', function(e){
console.log('clicked'); // This will be executed once.
}, {once: true});