在純Javascript中找到event.target ID

Question

這是我的菜單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>

盡管CSS：hover屬性以及Javascript mouseover和mouseenter事件在帶有chrome，IE或Safari的觸摸設備上的工作方式大不相同，但我決定將菜單下拉菜單設置如下：為了顯示下拉菜單，有以下功能：

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

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

為了隱藏下拉菜單，我想在整個窗口上使用mouseover事件，除了<div id="menuDiv"> 。 代碼是：

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（元素ID，指向鼠標的位置）。 有一些解決方案，但僅在jQuery中。

Answer 1

注意：這種方法在這種情況下是合理的，這很討厭並且不能解決所有問題。 在其他情況下，請使用mouseleave和mouseenter。

正如您在評論中告訴我的那樣，您需要一個將鼠標懸停在除div以外的任何位置時觸發的函數。

讓我們看看，當鼠標進入div時，它會觸發窗口mouseover事件和div mouseover事件，這是可以避免的。 但是您可以創建一種方法來檢查是否僅觸發了其中之一。

首先，我們需要設置一個值為0的變量，然后當div鼠標懸停觸發時，將其設置為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";
}

然后，我們在窗口對象上放置一個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。

請記住：此解決方案代碼不適用於生產，請使用此方法並將其重寫。

看看這個矮人

Answer 2

我這樣做如下：

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上進行了測試

Answer 3

您可以通過以下方式獲取元素的ID：

event.target.id

Answer 4

在此處使用mouseenter en mouseleave等現代事件。

 document.getElementById("menuDiv").addEventListener("mouseenter",showMenu); function showMenu() { document.getElementById("menuContent").style.display="block"; document.getElementById("menuIcon").style.display="none"; } document.getElementById("menuDiv").addEventListener("mouseleave", hideMenu); function hideMenu(event) { var x = document.getElementById("menuContent"); var y = document.getElementById("menuIcon"); let e = event || window.event; x.style.display="none"; y.style.display="block"; } 

 <header style="padding:0;height:2em;margin-bottom:0.5em;"> <div id="menuDiv" class="dropdown" style="float:left;padding-top:0.4em;" > test <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> 

另一種方法：

 document.getElementById("menuDiv").addEventListener("mouseenter", showMenu); function showMenu() { document.getElementById("menuContent").style.display="block"; document.getElementById("menuIcon").style.display="none"; } window.addEventListener("mouseover", hideMenu); function hideMenu(event) { var x = document.getElementById("menuContent"); var y = document.getElementById("menuIcon"); let e = event || window.event; if (!document.getElementById("menuDiv").contains(e.target) ) { x.style.display="none"; y.style.display="block"; } } 

 <header style="padding:0;height:2em;margin-bottom:0.5em;"> <div id="menuDiv" class="dropdown" style="float:left;padding-top:0.4em;" > test <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>