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

Question

I have programmed a webpage where you can hover over certain parts of an image an a text field with a link pops up if you do so. 我已经编写了一个网页，您可以将其悬停在图像的某些部分上，如果您这样做，则会弹出带有链接的文本字段。 This functionality has been implemented in JavaScript. 此功能已在JavaScript中实现。

The pop-up text box shows in IE11 but not in Safari or Chrome (JavaScript enabled, so this is not causing the problem). 弹出文本框显示在IE11中，但不显示在Safari或Chrome中（启用了JavaScript，因此不会引起问题）。 Anybody knows a fix for this to get this running also on Safari and Chrome? 有人知道有修复程序可以在Safari和Chrome上运行它吗？

The relevant code is here: 相关代码在这里：

<!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

The issue is that the mouseover event from the link with MakeVisible bubbles to the the mouseover listener for the parent with ResetAllMenus , so the "dialogue" is shown then hidden again. 问题是，从MakeVisible链接的鼠标悬停事件冒泡到鼠标悬停听者与ResetAllMenus父，因此，“对话”处再次隐藏。

You need to pass the event to the listener and stop propagation from the link mouseover. 您需要将事件传递给侦听器，并停止从链接鼠标悬停进行传播。 It might work in IE because the listeners are called in a different order. 它可能在IE中起作用，因为以不同的顺序调用了侦听器。

Also, function names starting with a capital letter are, by convention, reserved for constructors, so makeVisible and resetAllMenus is preferred. 另外，按照惯例，以大写字母开头的函数名称保留给构造函数使用，因此首选makeVisible和resetAllMenus 。

Below is your code refactored as an 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>

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