Как удалить событие щелчка дочернего элемента?

Question

Нужна ваша помощь в этом. В панели навигации у меня есть элемент с именем author, который показывает информацию об авторе при нажатии в виде выпадающего меню. Проблема в том, что выпадающий список кликабелен, и он исчезает. Я хочу, чтобы иметь возможность показать / закрыть его только в панели навигации.

<div id = 'Author' class = 'navbarItem'>Author
   <div id = 'authorInfo'>
         // info about author
   </div>

const author = document.getElementById('Author');
const authorInfo = document.getElementById('authorInfo');

author.onclick = () => {
     if(authorInfo.style.display == 'none' || authorInfo.style.display == '')
          authorInfo.style.display = 'block'
     else 
          authorInfo.style.display = 'none';     
}

Попытался установить событие onclick для authorInfo на ноль, что не работает.

Answer 1

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

const author = document.getElementById('Author');
const authorInfo = document.getElementById('authorInfo');

// You need the event parameter on function
author.onclick = function(event) {
     // Do it only if clicked element is author div, not its child
     if(event.target == author) {
         if(authorInfo.style.display == 'none' || authorInfo.style.display == '')
             authorInfo.style.display = 'block'
         else 
             authorInfo.style.display = 'none';     
     }
}

<div id = 'Author' class = 'navbarItem'>Author
   <div id = 'authorInfo' style="display:none;">
         // info about author
   </div>
</div>