javascript - 停止 onmouseenter 在 Chrome 和 Firefox 中重复触发

Question

我正在做一场噩梦，试图弄清楚这一点。 onmouseenter 甚至在鼠标进入带有该事件的 div 后一直触发，每次鼠标移动时都会触发该函数。它在 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) {
	if (a === 0) {
		divVar = "demo";
	}
	else if (a === 1) {
		divVar = "demo1";
	}
	else if (a === 2) {
		divVar = "demo2";
	}
	ranNum = Math.random();
	result_10 = (ranNum * 5) + 1;
	resultFloor = Math.floor(result_10);
	piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
	document.getElementById(divVar).innerHTML = piccy;
}

<div id="container">
	<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);
	if (a === 0) {
		divVar = "demo";
	}
	else if (a === 1) {
		divVar = "demo1";
	}
	else if (a === 2) {
		divVar = "demo2";
	}
	ranNum = Math.random();
	result_10 = (ranNum * 5) + 1;
	resultFloor = Math.floor(result_10);
	piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
	//document.getElementById(divVar).innerHTML = piccy;
        document.getElementById(divVar).style.background = "url(random_images/" + resultFloor + ".gif)";
}

<div id="container">
	<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>