event.target

Question

我回到这里为我的菜鸟问题寻求答案。我正在使用PHP，MySQL和JavaScript（以及AJAX）来创建一个类别菜单，其中包括从我的MySQL数据库中获取的类和子类。我使用PHP输入它们，但是在演示中，我将使用最终输出。我的问题是，当我将鼠标悬停在类上时，我想更新第二个子菜单的内容。我想将第二个菜单悬停在第一个菜单上（作为一个洞），并且仅当将一个类悬停时才显示第二个菜单的内容。为了更好地了解我的情况，这是我的代码：

var httpRequest = new XMLHttpRequest();

function deschid_subcat(subcat) {
  if (!httpRequest) {
    //alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
  httpRequest.onreadystatechange = get_subcat;
  httpRequest.open('GET', 'get-subcat.php?q=' + subcat, true);
  httpRequest.send();

  function get_subcat() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        document.getElementById('subclasa').innerHTML = this.responseText;
      } else {
        //alert('There was a problem with the request.');
      }
    }
  }

}
window.onmousemove = function(event) {
  anim_subcat(event);
}

function anim_subcat(event) {
  if (event.target == document.getElementById('dropdown-content-categorii') || event.target == document.getElementById('subclase-content') || event.target == document.getElementById('grp')) {
    document.getElementById('subclase-content').style.display = "block";
    document.getElementById('dropdown-content-categorii').style.boxShadow = "0px 5px 10px grey";
  } else if (event.target != document.getElementById('dropdown-content-categorii')) {
    document.getElementById('dropdown-content-categorii').style.boxShadow = "5px 5px 10px grey";
    document.getElementById('subclase-content').style.display = "none";
  }
}

.categorii {
  position: relative;
  z-index: 2;
  float: left;
  width: 120px;
  height: 100%;
  background-color: transparent;
  outline: none;
  border: none;
  font-family: Oswald;
  text-align: right;
  color: black;
  font-size: 18px;
  background-image: url('pictures/buton_categorii.png');
  background-repeat: no-repeat;
  cursor: pointer;
}

.dropdown-categorii:nth-child(3n+1) {
  clear: left;
}

.dropdown-categorii {
  float: left;
  z-index: 1;
  margin-left: 20px;
  width: 11%;
  height: 40px;
  z-index: 1;
}

.dropdown-content-categorii {
  display: none;
  float: left;
  position: absolute;
  margin-top: 38px;
  border: 1px solid #696969;
  box-shadow: 5px 5px 10px grey;
  width: 300px;
  height: 500px;
  background-color: white;
  z-index: 1;
  font-family: Ubuntu2;
  color: #003e91;
  animation-name: slideIn-categ;
  animation-duration: 0.2s;
}

@keyframes slideIn-categ {
  from {
    margin-top: 20px;
    opacity: 0;
  }
  to {
    margin-top: 38px;
    opacity: 1;
  }
}

.dropdown-categorii:hover .dropdown-content-categorii {
  display: block;
}

.categoriesep {
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-color: none;
  border: 0;
  outline: 0;
  text-decoration: underline;
  text-decoration-color: white;
  font-family: Ubuntu2;
  color: #003e91;
  text-align: left;
  font-size: 18px;
  margin-top: 10px;
  cursor: pointer;
}

@keyframes slideIn-categsep {
  from {
    margin-top: 20px;
    opacity: 0;
  }
  to {
    margin-top: 38px;
    opacity: 1;
  }
}

#subclase-content {
  display: none;
  width: 300px;
  height: 500px;
  background-color: white;
  margin-left: 301px;
  margin-top: 38px;
  border: 1px solid #696969;
  box-shadow: 5px 5px 10px grey;
  z-index: 1000;
  font-family: Ubuntu2;
  color: #003e91;
  animation-duration: 0.3s;
  animation-name: subcat-ap;
}

@keyframes subcat-ap {
  from {
    opacity: 0;
    margin-left: 295px;
  }
  to {
    opacity: 1;
    margin-left: 301px;
  }
}

<div class="dropdown-categorii">
  <button class="categorii" id="categorii">CATEGORII</button>
  <div class="dropdown-content-categorii" id="dropdown-content-categorii" style="box-shadow: grey 5px 5px 10px;">
    <a id="grp" href="http://localhost/prod.php?categ=AMBALARE"><button onmouseover='deschid_subcat("AMBALARE")' class="categoriesep" id="categoriesep">AMBALARE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=CHIMICE++SI+TEHNICE"><button onmouseover='deschid_subcat("CHIMICE++SI+TEHNICE")' class="categoriesep" id="categoriesep">CHIMICE  SI TEHNICE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=CONSTRUCTII"><button onmouseover='deschid_subcat("CONSTRUCTII")' class="categoriesep" id="categoriesep">CONSTRUCTII</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=ELECTRICE"><button onmouseover='deschid_subcat("ELECTRICE")' class="categoriesep" id="categoriesep">ELECTRICE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=INSTALATII+SANITARE"><button onmouseover='deschid_subcat("INSTALATII+SANITARE")' class="categoriesep" id="categoriesep">INSTALATII SANITARE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=INSTALATII+TERMICE"><button onmouseover='deschid_subcat("INSTALATII+TERMICE")' class="categoriesep" id="categoriesep">INSTALATII TERMICE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=ORGANE+DE+ANSAMBLARE"><button onmouseover='deschid_subcat("ORGANE+DE+ANSAMBLARE")' class="categoriesep" id="categoriesep">ORGANE DE ANSAMBLARE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=SCULE%2CUNELTE%2CACCESORII"><button onmouseover='deschid_subcat("SCULE%2CUNELTE%2CACCESORII")' class="categoriesep" id="categoriesep">SCULE UNELTE ACCESORII</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=SISTEME+DE+FIXARE"><button onmouseover='deschid_subcat("SISTEME+DE+FIXARE")' class="categoriesep" id="categoriesep">SISTEME DE FIXARE</button></a>
    <a id="grp" href="http://localhost/prod.php?categ=TAMPLARIE+PVC+SI+ALUMINIU"><button onmouseover='deschid_subcat("TAMPLARIE+PVC+SI+ALUMINIU")' class="categoriesep" id="categoriesep">TAMPLARIE PVC SI ALUMINIU</button></a>
  </div>
  <div id="subclase-content" class="subclase-content" style="display: none;">
    <p id="subclasa" style="margin-left: 4px;">
      <p id="cls"> PLASE INSECTE</p>
      <p id="cls">FERESTRE PVC SI ALUMINIU</p>
      <p id="cls">FERONERIE PVC SI ALUMINIU</p>
      <p id="cls">PLASE INSECTE</p>
    </p>
  </div>
</div>

AJAX代码可以正常工作，并且可以从数据库中很好地检索子类（在演示中，由于我无法在此代码段中使ajax完全正常工作，因此它仅在子类中显示。并保持不变）。我的问题是Javascript代码的第二部分。我以为，如果我每次都检查鼠标在窗口上的移动是否位于dropdown-content-categorii和第二个菜单之外的其他位置，它将不会触发else if并且不会关闭菜单。但是，文本是一个不同的对象（这样称呼它），这样，它将关闭子菜单。我的笨拙进来了，因为当光标停留在文本上时，我无法使子菜单保持可见。就像光标忽略了文本一样。我尝试通过在if中为grp元素设置最后一个条件，但是不起作用。

感谢您阅读我的长篇文章，我希望它不会引起混淆。我想听听您的意见和建议！