onmouseenterを繰り返しChromeとFirefoxで起動するのをやめてください。

Question

私はこれを理解しようとする悪夢を抱いています。 onmouseenterは、マウスがイベントのあるdivに入った後も発火し続けます。マウスを動かすたびに、それがfuncitonをトリガーします。それはIEでうまく動作し、ChromeやFFでは動作しません。ここにはコードのライブバージョンがあります：http://infinitedv.co.uk/rantest/random_test_2.1.html

私は画像をプレロードしていないので、すべての画像を見るには数回かかることがあります。助けをありがとうございました。私はタイムアウトを使用しようとしましたが、それは本当にパンを外していなかったし、面倒です。

var ranNum, result_10, resultFloor, piccy, audio, a, divVar; 
 

 
function myFunction(a) { 
 
\t if (a === 0) { 
 
\t \t divVar = "demo"; 
 
\t } 
 
\t else if (a === 1) { 
 
\t \t divVar = "demo1"; 
 
\t } 
 
\t else if (a === 2) { 
 
\t \t divVar = "demo2"; 
 
\t } 
 
\t ranNum = Math.random(); 
 
\t result_10 = (ranNum * 5) + 1; 
 
\t resultFloor = Math.floor(result_10); 
 
\t piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />"; 
 
\t document.getElementById(divVar).innerHTML = piccy; 
 
}

<div id="container"> 
 
\t <div id="demo" onmouseenter="myFunction(0)">This</div> 
 
    <div id="demo1" onmouseenter="myFunction(1)">This</div> 
 
    <div id="demo2" onmouseenter="myFunction(2)">This</div> 
 
    <div>Will's Imagepop test. </div> 
 
    <audio id="audio" src="pop.wav" ></audio> 
 
</div>

Answer 1

本当に奇妙な男、。しかし、それはdivのinnerHTMLと何かです。バックグラウンドイメージの内容を置き換えるのではなく、このバージョンをチェックしてください。見事に働いた

var ranNum, result_10, resultFloor, piccy, audio, a, divVar; 
 

 
function myFunction(a) { 
 
    console.log('function called for', a); 
 
\t if (a === 0) { 
 
\t \t divVar = "demo"; 
 
\t } 
 
\t else if (a === 1) { 
 
\t \t divVar = "demo1"; 
 
\t } 
 
\t else if (a === 2) { 
 
\t \t divVar = "demo2"; 
 
\t } 
 
\t ranNum = Math.random(); 
 
\t result_10 = (ranNum * 5) + 1; 
 
\t resultFloor = Math.floor(result_10); 
 
\t piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />"; 
 
\t //document.getElementById(divVar).innerHTML = piccy; 
 
     document.getElementById(divVar).style.background = "url(random_images/" + resultFloor + ".gif)"; 
 
}

<div id="container"> 
 
\t <div id="demo" onmouseenter="myFunction(0)">This</div> 
 
    <div id="demo1" onmouseenter="myFunction(1)">This</div> 
 
    <div id="demo2" onmouseenter="myFunction(2)">This</div> 
 
    <div>Will's Imagepop test. </div> 
 
    <audio id="audio" src="pop.wav" ></audio> 
 
</div>