Почему не удаляется класс по клику?

233

31 декабря 2019, 13:20

По клику на мою цель в консоли выводится сообщение, значит делегирование правильно работает, но тогда почему не удаляется класс?

<section class="drop-icons">
    <ul class="icon">
        <li><!-- close по нему должен происходить -->
            <a href="#">Contact us</a>
        </li>
        <li>
            <a href="#">Whatsapp</a>
        </li>
        <li>
            <a href="#">Telegram</a>
        </li>
        <li>
            <a href="#">Позвонить</a>
        </li>
    </ul>
</section>

icon = document.querySelector('.icon');
    icon.onclick = function(){
        icon.classList.add('change');
    }
close_icon = document.querySelector('.icon > li:nth-of-type(1)');
    close_icon.onclick = function(event){
        let e = event.target;
        if(e != close_icon) return;
        icon.classList.remove('change');
            console.log('y')
    }

Answer 1

У Вас 2 слушателя и оба срабатывают, причем второй тот, который висит на внешнем элементе event.stopPropagation() спасет отца русской демократии, этот вызов отменяет дальнейшую обработку этого события

Так же поможет указать 3 агрумент false при добавлении слушателя через addEventListener

let icon = document.querySelector('.icon'); 
icon.onclick = function(){ 
    icon.classList.add('change'); 
} 
 
let close_icon = document.querySelector('.icon > li:nth-of-type(1)'); 
close_icon.onclick = function(event){ 
    let e = event.target; 
    icon.classList.remove('change'); 
    event.stopPropagation() 
 
}

.change { 
border: solid 
}

<section class="drop-icons"> 
    <ul class="icon"> 
        <li><!-- close по нему должен происходить --> 
            <a >Contact us</a> 
        </li> 
        <li> 
            <a >Whatsapp</a> 
        </li> 
        <li> 
            <a>Telegram</a> 
        </li> 
        <li> 
            <a >Позвонить</a> 
        </li> 
    </ul> 
</section>

Answer 2

Потому что e в if (e != close_icon) return; - это элемент а, а не li.