是否可以event.target.matches('.class-1.class-2‘> .class-3')

Question

基本上，我想做这样的事情：

<my-root-element id="myID">
    <button id="some-id">Occupy The Universe</button>
    <div id="x" class="class-1 class-1a">
        <div id="y" class="class-3">
        <p>Rabit hole</p>
    </div>
</div>
</my-root-element>

let rootEl = document.getElementById(myID);
rootEl.addEventListener('click', function(e) {
    if (e.target && e.target.matches('button#some-id')) {
        console.log("Did something nasty");
    } else if (e.target && e.target.matches('.class-1.class-1a') || e.target && e.target.matches('.class-1.class-1a > .class-3')) {
        console.log("Was there");
    }
});

我发现类嵌套不起作用，但也许我遗漏了什么？如果这两个东西都做同样的事情，我想在一起做这件事。看起来querySelector支持嵌套类，但不知道如何在其中实现它。

Answer 1

看起来#x的简单样式很有帮助。一个不再需要的||部件。

> * {
    pointer-events: none;
}

Answer 2

下面给出了适用于我的解决方案，当我单击图像或Profile按钮文本时，它会出现并进行切换

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function userProfile() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches(['.dropbtn', '.profile'])) {
      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');
        }
      }
    }
  }