close dropdown menu on click outside

Question

i've got this problem that my dropdown menu doesn't close on click outside, it seems that main cause of this problem is the fontawesome user icon itself, i tried to find the problem with alert(), but the alert() activated on every single px of the website even when i clicked on the user icon itself.

  
  
  
 
   
 
    
    function dropdown() {
    var x = document.getElementsByClassName("submenu");
    x.classList.toggle("show");
    }

    var submenu = document.getElementsByClassName("submenu");
    window.onclick = function(event) {
    if (!event.target.matches('#superior')) {
    if (submenu.classList.contains('show')) {
    submenu.classList.remove('show');
    }
    }
    }
 
    
        * {
        padding: 0;
        margin: 0;
        box-sizing: 
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Raleway', sans-serif;
        }

        header {
            background-color: #fff;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .navbar {
            min-height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5px;
            z-index: 2;
        }

        .nav-menu {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
            gap: 50px;
        }

        .nav-branding {
            font-size: 2em;
            margin: 0;
        }

        .nav-item {
            line-height: 25px;
            margin-top: 25px;
        }

        .nav-link {
            transition: 0.5s ease;
            font-size: 1.2rem;
        }

        .submenu{
            display: none;
            position: absolute;
            z-index: 2;
            line-height: 50px;
            font-size: 1.2rem;
            font-weight: 600;
            width: 295px;
            transform: translateX(-79%);
            text-align: center;
            min-height: 100px;
            background-color: black;
        }
        .sub-link{
            color: white;
        }
            .show{
            display: block;
        }


    border-box;
        font-family: 'Raleway', sans-serif;
    }

    header {
        background-color: #fff;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: black;
    }

    .navbar {
        min-height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        z-index: 2;
    }

    .nav-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
        gap: 50px;
    }

    .nav-branding {
        font-size: 2em;
        margin: 0;
    }

    .nav-item {
        line-height: 25px;
        margin-top: 25px;
    }

    .nav-link {
        transition: 0.5s ease;
        font-size: 1.2rem;
    }

    .submenu{
        display: none;
        position: absolute;
        z-index: 2;
        line-height: 50px;
        font-size: 1.2rem;
        font-weight: 600;
        width: 295px;
        transform: translateX(-79%);
        text-align: center;
        min-height: 100px;
        background-color: black;
    }
    .sub-link{
        color: white;
    }
        .show{
        display: block;
    }
 
    
    <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>
    <header>
        <nav class="navbar">
            <a href="#" class="logo">logo</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">link</a>
                </li>
                <li class="nav-item user-menu">
                    <a onclick="dropdown()" id="superior" href="#" class="nav-link"><i class="fa-solid fa-user"></i></a>
                    <ul id="submenu" class="submenu">
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    </body>

    </html>
 
   
 
  


    function dropdown() {
    var x = document.getElementsByClassName("submenu");
    x.classList.toggle("show");
    }

    var submenu = document.getElementsByClassName("submenu");
    window.onclick = function(event) {
    if (!event.target.matches('#superior')) {
    if (submenu.classList.contains('show')) {
    submenu.classList.remove('show');
    }
    }
    }



        * {
        padding: 0;
        margin: 0;
        box-sizing: 
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Raleway', sans-serif;
        }

        header {
            background-color: #fff;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .navbar {
            min-height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5px;
            z-index: 2;
        }

        .nav-menu {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
            gap: 50px;
        }

        .nav-branding {
            font-size: 2em;
            margin: 0;
        }

        .nav-item {
            line-height: 25px;
            margin-top: 25px;
        }

        .nav-link {
            transition: 0.5s ease;
            font-size: 1.2rem;
        }

        .submenu{
            display: none;
            position: absolute;
            z-index: 2;
            line-height: 50px;
            font-size: 1.2rem;
            font-weight: 600;
            width: 295px;
            transform: translateX(-79%);
            text-align: center;
            min-height: 100px;
            background-color: black;
        }
        .sub-link{
            color: white;
        }
            .show{
            display: block;
        }


    border-box;
        font-family: 'Raleway', sans-serif;
    }

    header {
        background-color: #fff;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: black;
    }

    .navbar {
        min-height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        z-index: 2;
    }

    .nav-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
        gap: 50px;
    }

    .nav-branding {
        font-size: 2em;
        margin: 0;
    }

    .nav-item {
        line-height: 25px;
        margin-top: 25px;
    }

    .nav-link {
        transition: 0.5s ease;
        font-size: 1.2rem;
    }

    .submenu{
        display: none;
        position: absolute;
        z-index: 2;
        line-height: 50px;
        font-size: 1.2rem;
        font-weight: 600;
        width: 295px;
        transform: translateX(-79%);
        text-align: center;
        min-height: 100px;
        background-color: black;
    }
    .sub-link{
        color: white;
    }
        .show{
        display: block;
    }

    <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>
    <header>
        <nav class="navbar">
            <a href="#" class="logo">logo</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">link</a>
                </li>
                <li class="nav-item user-menu">
                    <a onclick="dropdown()" id="superior" href="#" class="nav-link"><i class="fa-solid fa-user"></i></a>
                    <ul id="submenu" class="submenu">
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                        <li>
                            <a class="sub-link" href="#">link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    </body>

    </html>

Answer 1

Detect click and check the closest parent of clicked element. Yes now it's supported without jQuery.

 document.addEventListener('mousedown', function(event) { var elem = event.target; var closest = elem.closest(".jmp-container"); if (closest) { // console.log("click inside") } else { // hide menu document.querySelector(".jmp-container")?.remove(); } })

 body { height: 100vh; }.container, .jmp-container { display: inline-block; padding: 20px; border: 1px solid gray; }.active { border: 2px solid red; }

 <div class="container"> I AM REST OF BODY <div class="jmp-container"> I AM NAVBAR <button>hello</button> </div> </div>