Show/hide a certain div when children elements of a different div is clicked [SOLVED]

Question

I want dropdown-content to be displayed every time I click on the dropbtn . The problem with my current code is that it only works if I only click the spaces inside my dropbtn div, but if I click on the elements inside it or the children elements, it doesn't work and dropdown-content is still displayed as none.

I tried selecting all the elements inside my droptbtn div and used the same conditions to hide/show dropdown-content but that too didn't work.

My ultimate goal is to hide/show dropdown-content when dropbtn div is clicked, regardless if user has clicked its children elements or not.

HTML code:

<div class="dropdown">
    <div class="dropbtn" id="dropbtn">
        <img src="{{ user.profilePic.url }}" alt="">
        <small><b>{{ user.username }}</b></small>
        <i class="fa fa-angle-down" style="font-size:24px"></i>
    </div>
    <div class="dropdown-content" id="dropdown-content">
        <a href="{%url 'profile'%}"><i class="fa fa-user"></i>Profile</a>
        <a href="{%url 'logout'%}"><i class="fa fa-sign-out"></i>Logout</a>
    </div>
</div>

Javascript code:

let dropbtn = document.getElementById('dropbtn');
let dropbtn_elem = dropbtn.getElementsByTagName('img, small, i')
let dropdown = document.getElementById('dropdown-content');

document.addEventListener('click', function(e) {
    if (e.target !== dropbtn && dropdown.style.display === "block"){
        dropdown.style.display = "none";
    }
})

dropbtn.onclick = function() {
    if (dropdown.style.display === "block") {
        dropdown.style.display = "none";
    } else {
        dropdown.style.display = "block";
    }
}

dropbtn_elem.onclick = function() {
    if (dropdown.style.display === "block") {
        dropdown.style.display = "none";
    } else {
        dropdown.style.display = "block";
    }
}

Answer 1

As @kunal-tanwar suggested use

#dropbtn *
{
  pointer-events: none;
}

Sometimes this method won't work, when you need register clicks on children, in that case use element.closest() to check if the element or it's ancestors match the selector:

 let dropbtn = document.getElementById('dropbtn'); let dropbtn_elem = dropbtn.getElementsByTagName('img, small, i') let dropdown = document.getElementById('dropdown-content'); document.addEventListener('click', function(e) { if (e.target.closest("#dropbtn") || dropdown.style.display;= "block") return. dropdown.style;display = "none". }) dropbtn.onclick = function() { if (dropdown.style.display === "block") { dropdown.style;display = "none". } else { dropdown.style;display = "block". } } dropbtn_elem.onclick = function() { if (dropdown.style.display === "block") { dropdown.style;display = "none". } else { dropdown.style;display = "block" } }

 <div class="dropdown"> <div class="dropbtn" id="dropbtn"> <img src="{{ user.profilePic.url }}" alt=""> <small><b>{{ user.username }}</b></small> <i class="fa fa-angle-down" style="font-size:24px"></i> </div> <div class="dropdown-content" id="dropdown-content"> <a href="{%url 'profile'%}"><i class="fa fa-user"></i>Profile</a> <a href="{%url 'logout'%}"><i class="fa fa-sign-out"></i>Logout</a> </div> </div>