Javascript代碼在IE11上運行，但不在Safari和Chrome上運行

我編寫了一個網頁，您可以在其中將鼠標懸停在圖像的某些部分上，如果您這樣做，則會彈出鏈接的文本字段。這個功能已經在JavaScript中實現。Javascript代碼在IE11上運行，但不在Safari和Chrome上運行

彈出文本框顯示在IE11中，但不在Safari或Chrome中（啓用了JavaScript，所以這不會導致問題）。任何人都知道解決這個問題，以便在Safari和Chrome上運行它。

相關的代碼是在這裏：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="../Rules.css" /> 
</head> 
<body> 
<p> 
By hovering over the below links should pop up in light yellow boxes. 
</p> 
<p> 
<map id="OMMap" name="OMMap"> 
<area href="../2/CCEP general.htm" shape="rect" coords="0, 0, 1531, 18"/> 
<area href="../2/CCEP general.htm" shape="rect" coords="151, 133, 301, 170"/> 
<area href="../2/CCEP general.htm" shape="rect" coords="302, 284, 453, 321"/> 
<area href="../2/CCEP general.htm" shape="rect" coords="454, 435, 604, 472"/> 
<area href="../2/CCEP general.htm" shape="rect" coords="1247, 643, 1398, 680"/> 
</map> 

<div style="position:relative"> 
<img onmouseover="ResetAllMenus()" src="OM.gif" usemap="#OMMap" 
    width="1531px" 
    height="851px" /> 
<div style="position:absolute; left:152px; top: 200px"> 
<span onmouseover="MakeVisible('PD2')"> <b>PD2</b> Preliminary Design </span> 
</div> 

<div id="PD2" class="OMLinks" style="top:215px; left:166px"> 
<a href="../3/PD.htm"> PD2 State-Wide</a> 

</div> 
</div> 
</div> 

<script> 
function MakeVisible(element){ 

ResetAllMenus() 

// Find the element and unhide it. 
var element = document.getElementById(element) 
element.style.display = "block" 
} 

function ResetAllMenus() { 
// Get an array with div elements. 
var links = document.getElementsByTagName("div") 

// Search the array for OMLink boxes, and hide them. 
for (var j = 0; j<links.length; j++) { 
if(links[j].className =='OMLinks') links[j].style.display = "none" 
} 
} 
</script> 
</body> 
</html>

來源

2017-04-05 Joerg

您需要定義什麼是「不工作」，而應該修改代碼以提供運行作爲一個片斷一個小例子。這將是更有效地使用'document.getElementsByClassName（「OMLinks」）'，而不是讓所有的div和篩選那些類* OMLinks *。 – RobG

你有你''的'標籤href'的空間。 'href's必須沒有空格。嘗試刪除的空間，看看它是否在ohter的browers –

工作'（元素）'和'VAR element'你爲什麼要重新聲明呢？而'getElementsByClassName'或'querySelectorAll'會比選擇所有div好很多。 – epascarello

的問題是，從MakeVisible氣泡的鼠標懸停監聽器的鏈接父與ResetAllMenus鼠標懸停事件，因此，「對話」顯示，然後再次隱藏。

您需要將事件傳遞給偵聽器並停止鏈接mouseover的傳播。它可能在IE中工作，因爲監聽器以不同的順序被調用。

此外，函數名以大寫字母開頭的，按照慣例，對構造保留，所以makeVisible和resetAllMenus是首選。

下面是你的代碼重構爲exmaple。

function makeVisible(element, event) { 
 
    event.stopPropagation(); 
 
    resetAllMenus(); 
 
    // Find the element and unhide it. 
 
    var element = document.getElementById(element); 
 
    element.style.display = ''; 
 
} 
 

 
function resetAllMenus() { 
 
    // Get an array with div elements. 
 
    var links = document.getElementsByTagName("div"); 
 

 
    // Search the array for OMLink boxes, and hide them. 
 
    for (var j = 0; j < links.length; j++) { 
 
    if (links[j].className == 'OMLinks') { 
 
     links[j].style.display = "none"; 
 
    } 
 
    } 
 
}

.OMLinks { 
 
    background-color: yellow; 
 
}

<p>By hovering over the below links should pop up in light yellow boxes.</p> 
 
<div onmouseover="resetAllMenus()"> 
 
    <p> reset div </p> 
 
    <div><span onmouseover="makeVisible('PD2', event)"><b>PD2</b> Preliminary Design </span> 
 
    </div> 
 
    <div id="PD2" class="OMLinks"> 
 
    <a href="../3/PD.htm"> PD2 State-Wide</a> 
 
    </div> 
 
</div>

來源

2017-04-05 01:34:00 RobG

Javascript代碼在IE11上運行，但不在Safari和Chrome上運行

回答

相關問題