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

Question

我已經編寫了一個網頁，您可以將其懸停在圖像的某些部分上，如果您這樣做，則會彈出帶有鏈接的文本字段。 此功能已在JavaScript中實現。

彈出文本框顯示在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>

Answer 1

問題是，從MakeVisible鏈接的鼠標懸停事件冒泡到鼠標懸停聽者與ResetAllMenus父，因此，“對話”處再次隱藏。

您需要將事件傳遞給偵聽器，並停止從鏈接鼠標懸停進行傳播。 它可能在IE中起作用，因為以不同的順序調用了偵聽器。

另外，按照慣例，以大寫字母開頭的函數名稱保留給構造函數使用，因此首選makeVisible和resetAllMenus 。

下面是重構為示例的代碼。

 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>

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

問題描述

1 個解決方案

解決方案1
0 2017-04-05 01:34:00

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

問題描述

1 個解決方案

解決方案1 0 2017-04-05 01:34:00

解決方案1
0 2017-04-05 01:34:00