1

所以我目前在画布上有一张图片,我希望在您单击图片后重新加载页面。问题是,一旦调用“Go”函数,页面就会重新加载,而不是在单击事件启动时重新加载。这是代码的一部分。

function Go()
{
    myimage = new Image();
    myimage.src = "http://i.imgur.com/xcLDp.gif";

    ctx.drawImage(myimage, 294, 100);

    myimage.onClick = window.location.reload();
}

我觉得我错过了一些微不足道的东西,任何帮助将不胜感激。

谢谢。

问候,

马特

编辑:为 Derek 添加。

嘿,德里克,我非常感谢您的帮助。因为我对编码还很陌生,所以我会和你一起成为真正的菜鸟。因此,我正在尝试实现您在我的测试网站上向我展示的演示代码, 我得到的错误是“未捕获的 ReferenceError:$ 未定义”。

现在我知道“$”是一个 jQuery 符号,现在我对编码/javascript 很陌生,所以想象一下我对 javascript 库 (jQuery) 有多么陌生。

我已经下载了 jQuery 并将其放在同一目录中,然后将此行添加到 html:

<script src="jquery-1.7.2.js" type="text/javascript"></script>

难道我做错了什么?为什么它没有在 jquery 库上使用?

4

3 回答 3

3

那是因为你reload立即打电话给()

myimage.onClick = window.location.reload;

编辑: 并且您无法在图像上触发点击事件,您应该绑定到现有的 dom 元素,例如:

myimage.onload = function(){
  document.querySelector("canvas").addEventListener("click", window.location.reload);
};
于 2012-05-30T02:57:45.177 回答
3

“重装”其实是一种错觉。当你这样做

myimage.onClick = window.location.reload();

即刻reload()执行。

你真正打算做的是:

myimage.onClick = window.location.reload;

但为什么是错觉呢?因为您甚至无法单击图像,因为它在DOM中不存在。该图像在您的 中<canvas>,因此它应该是:

document.querySelector("canvas").addEventListener("click",function(){
    location.reload();
});

您还必须计算指针是否在图像上方。见演示。

演示:http: //jsfiddle.net/DerekL/QuAVc/

于 2012-05-30T03:00:31.187 回答
0

是的,确定你错过了什么,你必须通过 window.location.reload 作为回调(不要放括号),试试这个:

function Go() {
  myimage = new Image();
  myimage.src = "http://joinmissinglink.com/wp-content/uploads/2012/01/go-button5.jpg";

  ctx.drawImage(myimage, 294, 100);

  myimage.onClick = window.location.reload; //window.location.reload is a callback
}
于 2012-05-30T03:01:17.090 回答