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上运行

回答

相关问题