Javascript代码在IE11上运行，但在Safari和Chrome上不能运行

我已经编写了一个网页，您可以在其中将鼠标悬停在图像的某些部分上，如果您这样做，则会弹出带有链接的文本字段。此功能已在 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>

问题是鼠标

悬停事件从带有 MakeVisible 的链接冒泡到具有 ResetAllMenu 的父级的鼠标悬停侦听器，因此显示"对话框"然后再次隐藏。

您需要将事件传递给侦听器，并从链接鼠标悬停停止传播。它可能在 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>

相关内容

最新更新

热门标签：