removeEventListener на имя класса после одного клика - PullRequest
Новая
       102

removeEventListener на имя класса после одного клика

0 голосов
/ 18 апреля 2020

Я пытаюсь написать Javascript, чтобы получить событие click для всех элементов с классом из массива. Все отлично работает, но мне нужно его отключить только до тех пор, пока не будет выполнено второе условие в функции klikej(). Когда событие click срабатывает, элемент с этим классом не должен быть кликабельным. Я пытался использовать 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() устанавливает атрибут данных для элемента, и как только появятся два элемента с одинаковыми атрибутами данных, он выведет на консоль «да». Если это два разных атрибута данных, они должны быть кликабельными снова.

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Если вы удалите прослушиватель событий и вам нужно будет прослушивать снова, вам нужно будет добавить его снова или прослушать что-то еще. Если бы мне нужно было распознать, если что-то щелкнуло, я бы добавил свойство к элементу в обратном вызове слушателя, так что-то вроде: 

// 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;

Это не является прямым ответом на ваш вопрос, но, надеюсь, другой взгляд на возможное решение - если я вас правильно понял, вы делаете что-то, когда на него нажимали, и что-то еще, когда на него еще не нажимали, и здесь вы можете контролировать оба случая.

1 голос
/ 18 апреля 2020

Вы можете добавить параметр с именем once в качестве третьего параметра addEventListener, который заставляет прослушиватель событий выполняться один раз. 

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