找到event.target ID在純JavaScript

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：懸停性能和Javascript鼠標懸停和的mouseenter事件的鉻，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()功能completelly錯誤或我只需要得到莫名其妙的事件ID（元素，在鼠標指向的ID）。有一些解決方案，但只有在jQuery中。

Answer 1

你可以得到元素的ID有：

event.target.id 

Answer 2

使用像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>

Answer 3

注：此方法是在這種情況下合理的，它的骯髒和解決所有問題並不好。在其他情況下使用mouseleave和mouseenter。

正如你在評論中告訴我的，你需要一個當鼠標懸停在除div之外的任何地方時觸發的函數。讓我們看看，當鼠標進入div時，它會觸發窗口鼠標懸停事件和div鼠標懸停事件，這是可以避免的。但是，您可以創建一種方法來檢查是否觸發了其中一個觸發器。

首先，我們需要設置一個變量值爲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"; 
} 

然後我們把一個遞增出變量窗口對象上的鼠標懸停事件：

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纔會運行。

切記：此解決方案代碼不適用於生產，請使用該方法並重寫它。

看this plunker

Answer 4

我做到了，如下所示：

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瀏覽器，歌劇，鉻，火狐，WinMobile，iPad的