<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>imagegame</title>
<style>
body { margin: 20px; }
img { margin: 20px; }
</style>
</head>
<body>
<img id="pic1" src="img/charpter9/zeroblur.jpg">
<img id="pic2" src="img/charpter9/oneblur.jpg">
<img id="pic3" src="img/charpter9/twoblur.jpg">
<img id="pic4" src="img/charpter9/threeblur.jpg">
<img id="pic5" src="img/charpter9/fourblur.jpg">
<img id="pic6" src="img/charpter9/fiveblur.jpg">
<script>
function init() {
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i++){
imgs[i].onclick = onClick;
}
}
function onClick(e){
var img = e.target;
var imgsrc = img.src;
var imgid = img.id;
var imgsrc0 = imgsrc;
imgsrc = imgsrc.replace("blur","");
img.src = imgsrc;
setTimeout(refresh, 5000, imgsrc0, imgid);
}
function refresh(imgsrc,id){
var img = document.getElementById(id);
img.setAttribute("src",imgsrc);
}
window.onload = init;
</script>
</body>
</html>
上面是代码，我主要考虑的是当点击触发器点击的一个元素时是否有解决鼠标双击的计划。
我发现的错误是当我双击页面上显示的图像时，图片不能自动重新创建。该案例是关于第142页的头头javascript书第9章。
谢谢你的时间。
主要的问题是，第二次src已经没有模糊了，第二次超时完成的时间被设置为src而不是模糊的那个。
您可以将原始源保留在数据属性中，并将src设置回该属性。此外，您可以在doubleclicks上取消setTimeout()。
function onClick(e){
var img = e.target;
var imgsrc = img.src;
var imgid = img.id;
var imgsrc0 = imgsrc;
//REM: Keep the original src
if(!img.getAttribute('data-img-src')){
img.setAttribute('data-img-src', imgsrc)
};
imgsrc = imgsrc.replace("blur","");
img.src = imgsrc;
//REM: Clear and reassign the timeout
clearTimeout(img.timeout); //REM: Dirty way, but fast to show
img.timeout = setTimeout(refresh, 5000, imgsrc0, imgid)
}
function refresh(imgsrc,id){
var img = document.getElementById(id);
//REM: Set the original src
img.setAttribute("src",img.getAttribute('data-img-src'));
img.removeAttribute('data-img-src')
}
然而，我认为将所有图像保存在对象中并在运行中创建img要容易得多。此外，它还会使您的代码从图像源中的固定命名方案中解除绑定。像这样例如：
var _Images = [
{Blurred: 'https://image.flaticon.com/icons/svg/172/172838.svg', Active: 'https://image.flaticon.com/icons/svg/196/196138.svg'},
{Blurred: 'https://image.flaticon.com/icons/svg/196/196138.svg', Active: 'https://image.flaticon.com/icons/svg/172/172838.svg'},
{Blurred: 'https://image.flaticon.com/icons/svg/172/172838.svg', Active: 'https://image.flaticon.com/icons/svg/196/196138.svg'}
];
window.onload = function(){
for(var i=0, j=_Images.length; i<j; i++){
var tImage = document.body.appendChild(document.createElement('img'));
tImage.src = _Images[i].Blurred;
tImage.setAttribute('width', '20px');
tImage.onclick = function(image){
this.src = image.Active;
window.clearTimeout(image.Timeout);
image.Timeout = window.setTimeout(function(){
this.src = image.Blurred
}.bind(this, image), 5000)
}.bind(tImage, _Images[i])
}
};