JavascriptコードはIE11上で動作しますが、SafariやChromeでは動作しません

画像の特定の部分にカーソルを合わせると、リンク先のテキストフィールドにポップアップが表示されるWebページがプログラミングされています。この機能は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

あなたは「動作しない」、とスニペットとして実行され、最小限の例を提供するために、コードを変更すべきかを定義する必要があります。 class * OMLinks *を持つクラスのすべてのdivとフィルタを取得するよりも、 'document.getElementsByClassName（ 'OMLinks'）'を使用するほうが効率的です。 – RobG

あなたの ''タグの 'href'にスペースがあります。 'href'は空白を持たなくてはなりません。スペースを削除して、それがブラウザで動作するかどうか確認してください。 –

'（要素）'と 'var要素 'なぜあなたはそれを再宣言していますか？ 'getElementsByClassName'や' querySelectorAll'はすべてのdivを選択するよりもずっと良いでしょう。 – epascarello

問題であることResetAllMenusを持つ親のためのマウスオーバーリスナーへMakeVisible泡のリンクからmouseoverイベントなので、「対話」再び表示されます。

イベントをリスナーに渡して、リンクmouseoverからの伝播を停止する必要があります。リスナーが異なる順序で呼び出されるため、IEで動作する可能性があります。

また、関数名は好ましいresetAllMenus、コンストラクタのために予約、慣例により、大文字でそうmakeVisibleとをされている開始します。

以下は、コードを例としてリファクタリングしたものです。

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では動作しません

答えて

関連する問題