在纯Javascript中查找event.target ID

这是我的菜单HTML：

<header style="padding:0;height:2em;margin-bottom:0.5em;">
 <div id="menuDiv" class="dropdown" style="float:left;padding-top:0.4em;" >
    <svg id="menuIcon" style="width:2em;height:1.4em;">
        <line x1="0" y1="0.1em" x2="2em" y2="0.1em" class="menuSVG" />
        <line x1="0" y1="0.6em" x2="2em" y2="0.6em" class="menuSVG" />
        <line x1="0" y1="1.1em" x2="2em" y2="1.1em" class="menuSVG" />
    </svg>
    <div id="menuContent">
        <button class="buttonList">blah</button>
        <button class="buttonList">bla blah</button>
        <button class="buttonList">bla</button>
        <button class="buttonList">blah</button>
    </div>
 </div>
....

</header>

若要隐藏下拉列表，我希望在整个窗口上使用mouseover事件。代码是：

window.addEventListener("mouseover", hideMenu);
function hideMenu(event) {
    var x = document.getElementById("menuContent");
    var y = document.getElementById("menuIcon");
    let e = event || window.event;
    let target = e.srcElement.id;//HERE IS PROBLEM
    if (target !=="menuDiv") {
      //if (x.style.display==="block") {
        x.style.display="none";
        y.style.display="block";
      //}
    }
}

---

我不知道hideMenu函数是否完全错误，或者我只需要以某种方式获取元素的事件ID，鼠标指向的位置。有一些解决方案，但仅限于jQuery。

您可以通过以下方式获得元素的id：

event.target.id

在这里使用现代活动，如mouseenter en mouseleave

document.getElementByIdmenuDiv.addEventListenermouseenter，showMenu； 功能显示菜单{ document.getElementByIdmenuContent.style.display=block； document.getElementByIdmenuIcon.style.display=none； } document.getElementByIdmenuDiv.addEventListenermouseleave，hideMenu； 函数隐藏{ var x=document.getElementByIdmenuContent； var y=document.getElementByIdmenuIcon； 设e=event | | window.event； x、 style.display=none； y、 style.display=block； } 测验 废话 废话 布拉 废话 注意：这种方法在这种情况下是合理的，它是令人讨厌的，并不是对所有问题都有好处。在其他情况下使用mouseleave和mouseenter。 正如你在评论中告诉我的，你想要一个函数，当鼠标移动到除div之外的任何地方时，它都会触发

让我们看看，当鼠标进入div时，它会触发windowmouseover事件和divmouseover事件，这是可以避免的。但是您可以创建一种方法来检查是否只触发了其中一个

首先，我们需要设置一个值为0的变量，然后当div mouseover触发时，我们将其设置为1：

var imChecking = 0;

document.getElementById("menuDiv").addEventListener("mouseover",showMenu);

function showMenu() {
    imChecking = 1;
    document.getElementById("menuContent").style.display="block";
    document.getElementById("menuIcon").style.display="none";
}

然后，我们在window对象上放置一个mouseover事件，该事件增加了变量：

window.addEventListener("mouseover",hideMenu);

function hideMenu() {
    imChecking++;
    console.log(imChecking);
    if(imChecking === 1){
       document.getElementById("menuContent").style.display="none";
       document.getElementById("menuIcon").style.display="block";
    }
   imChecking = 0;
}

我们知道如果showMenu运行，hideMenu也会运行，但是如果鼠标移动到div元素之外，只有hideMenu会运行

请记住：此解决方案代码不适用于生产，请使用该方法并重写它。 看

我是这样做的：

window.addEventListener("mouseover", hideMenu, false);
window.addEventListener("touchend", hideMenu, false);
function hideMenu(event) {
  var x = document.getElementById("menuContent");
  var y = document.getElementById("menuIcon");
  if (event.target.id === "menuIcon" || event.target.parentElement.id === "menuContent") {
    y.style.display="none";
    x.style.display="block";
  } else {
  x.style.display="none";
  y.style.display="block";
  }
}

---

我在IE、Opera、Chrome、Firefox、WinMobile、iPad上测试了它。srcElement是IE。要隐藏下拉列表，可以使用mouseout或mouseleave事件。这更简单更干净。@Yamin谢谢，但我不能使用mouseout。在带有触摸屏的IE中，在屏幕上执行一次触摸后，所有3个事件都将执行：鼠标悬停、单击、鼠标退出。所以，若你们只需触摸一次屏幕，鼠标上方就会显示下拉菜单，并立即隐藏鼠标位置。在chrome上工作很好。@Mouser非常感谢。我知道你帮了我。我只需要获取当前ID。类似于：e.target.parentElement.parentElement.ID，因为只有e.target.ID不起作用。但这可能是个好方法。@MichalKotus我不确定，但我认为mouseenter和mouseleave可能有不同的行为。如果你想换一种方法，试试这些。

window.addEventListener("mouseover", hideMenu, false);
window.addEventListener("touchend", hideMenu, false);
function hideMenu(event) {
  var x = document.getElementById("menuContent");
  var y = document.getElementById("menuIcon");
  if (event.target.id === "menuIcon" || event.target.parentElement.id === "menuContent") {
    y.style.display="none";
    x.style.display="block";
  } else {
  x.style.display="none";
  y.style.display="block";
  }
}