Okay so I'm making a dropdown for my social media website, and I wanted to add a slider button:

<div class = \"dropdown\">
<img id = \"navPFP\" style = \"margin-top: 2px;margin-left:20px; margin-right: 20px;\" class = \"pfp\" width = \"30\" height = \"30\" src=\"$pfpNAV\" alt=\"$userNAV's pfp\">

<div id = \"dropdown\" class = \"dropdown-content\">    

    <div id = \"names\" style = \"border-bottom: thin solid #BDBDBD;\">
        <h2>$fnNAV&nbsp;$lnNAV</h2>
        <p style = \"color:grey;margin-top:-40px;\">@$userNAV</p>
    </div>

    <div id = \"settings\" style = \"border-bottom: thin solid #BDBDBD;\">
        <a href = \"settings.php\">Accout Settings</a>      
    </div>

    <label class = \"switch\">
        <input type = \"checkbox\">
        <span class = \"slider round\"></span>
    </label>

    <a href = \"logout.php\">Log out @$userNAV</a>
    <a href = \"reset-password.php\">Reset password @$userNAV</a>

</div>

Problem is: unless it is just the #dropdown div, not any children, when you click it the dropdown closes

I have the following JS code to close the dropdown when anything other than the dropdown content is clicked:

window.onclick = function(event) {
    if (!event.target.matches('#dropdown') && !event.target.matches('#navPFP')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

Even if I add a && !event.target.matches('.switch') (or any of the other div ids) to the if statement, the dropdown still closes when the slider is clicked. How can I fix this so that the dropdown stays open?

Okay so I'm making a dropdown for my social media website, and I wanted to add a slider button:

<div class = \"dropdown\">
<img id = \"navPFP\" style = \"margin-top: 2px;margin-left:20px; margin-right: 20px;\" class = \"pfp\" width = \"30\" height = \"30\" src=\"$pfpNAV\" alt=\"$userNAV's pfp\">

<div id = \"dropdown\" class = \"dropdown-content\">    

    <div id = \"names\" style = \"border-bottom: thin solid #BDBDBD;\">
        <h2>$fnNAV&nbsp;$lnNAV</h2>
        <p style = \"color:grey;margin-top:-40px;\">@$userNAV</p>
    </div>

    <div id = \"settings\" style = \"border-bottom: thin solid #BDBDBD;\">
        <a href = \"settings.php\">Accout Settings</a>      
    </div>

    <label class = \"switch\">
        <input type = \"checkbox\">
        <span class = \"slider round\"></span>
    </label>

    <a href = \"logout.php\">Log out @$userNAV</a>
    <a href = \"reset-password.php\">Reset password @$userNAV</a>

</div>

Problem is: unless it is just the #dropdown div, not any children, when you click it the dropdown closes

I have the following JS code to close the dropdown when anything other than the dropdown content is clicked:

window.onclick = function(event) {
    if (!event.target.matches('#dropdown') && !event.target.matches('#navPFP')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

Even if I add a && !event.target.matches('.switch') (or any of the other div ids) to the if statement, the dropdown still closes when the slider is clicked. How can I fix this so that the dropdown stays open?

• javascript
• html

Share Improve this question Follow asked Jun 27, 2019 at 11:52 Francois van KempenFrancois van Kempen 14422 silver badges1414 bronze badges 1

• The slider and menu will probably be made up of multiple elements. Have you tried console.log(event.target) to see what elements are actually triggering the event? – skyline3000 Commented Jun 27, 2019 at 13:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Instead of matches(), use closest():

if (!event.target.closest('#dropdown')) {
  // target is neither #dropdown or one of its descendants; close the dropdown
}

element.closest('#dropdown') starts at element and walks upward through the DOM looking for #dropdown. If closest() finds #dropdown, it returns it, and element must be a child of #dropdown. If not, it returns null, and element must be outside #dropdown.

Recently, I have the same problem with event.target.matches().
Apart from using event.target.closest(), you can set the pointer-events CSS property to none.

document.querySelector("#container").addEventListener("click", (event) => {
  if (event.target.matches(".click-here")) {
    console.log("You clicked inside 'click-here' div.");
    const result = document.querySelector("#result");
    result.innerText = "You clicked inside 'click-here' div.";
  }
})

.no-click {
  pointer-events: none;
}

<div id="container">
  <div class="click-here">
    <div class="no-click">
      <div>div1</div>
      <div>
        <div>nested</div>
      </div>
      <p>text</p>
    </div>
  </div>
</div>
<div id="result">
</div>