find event.target ID in pure Javascript

Question

this is my menu 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>

while CSS :hover property and Javascript mouseover and mouseenter events work very differently on touch devices with chrome, IE or Safari, I decided to make my menu dropdown like this: To show dropdown there is function:

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

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

To hide dropdown I want use mouseover event working on whole window except <div id="menuDiv"> . Code is:

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";
      //}
    }
}

I do not know if hideMenu() function is completelly wrong or I need just get somehow event ID (ID of element, where mouse is pointed). There are some solutions, but only in jQuery.

Answer 1

NOTE: this approach is justified in this case, it's nasty and not good for all problems. use mouseleave and mouseenter in other cases.

As you told me in comments you want a function that fires when mouseover anywhere except your div.

Let's see, when the mouse enters the div, it triggers window mouseover event and div mouseover event and it's avoidable. But you can create a way that checks if just one of them is triggered.

First, we need to set a variable with 0 value, then when div mouseover triggers we set this to 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";
}

Then we put a mouseover event on window object that increments out variable:

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;
}

We know if showMenu runs, hideMenu runs too, But if the mouse is moving outside of div element only hideMenu will run.

Remember: this solution code is not for production, use the approach and rewrite it.

Look at this plunker

Answer 2

I did it as follows:

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";
  }
}

I tested it on IE,Opera,Chrome,Firefox,WinMobile,iPad

Answer 3

您可以通过以下方式获取元素的ID：

event.target.id

Answer 4

Use modern event like mouseenter en mouseleave here.

 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> 

Another approach:

 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>