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 回答