Javascript-onClick事件

因此，我当前在画布上有一个图像，我希望在单击图像后重新加载页面。问题是，页面在调用“Go”函数后立即重新加载，而不是在启动click事件时。下面是一段代码

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

    ctx.drawImage(myimage, 294, 100);

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

我觉得我错过了一些琐碎的事情，任何帮助都将不胜感激

谢谢

问候,

马特

编辑：为德里克添加

嘿，德里克，我真的很感谢你的帮助。我要成为现实 我对编码还不太熟悉，所以暂时不要跟你说话。所以我在努力 要实现您在我的测试网站上向我展示的演示代码 但是我犯了错误 返回为“未捕获引用错误：$未定义”

现在我知道“$”是一个jQuery符号，现在我对它还不太熟悉 一般来说，编码/javascript，想象一下我对javascript有多么陌生 库（jQuery）

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

我做错什么了吗？为什么它没有在jquery上得到关注 图书馆

---

这是因为您通过

（）

立即调用了

reload

编辑： 如果无法在图像上触发单击事件，则应绑定到现有的dom元素，如：

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

---

这是因为您通过

（）

立即调用了

reload

编辑： 如果无法在图像上触发单击事件，则应绑定到现有的dom元素，如：

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

“重新加载”实际上是一种错觉。当你这样做的时候

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

立即执行

reload（）

您真正想要做的是：

myimage.onClick = window.location.reload;

但为什么这是一种幻觉呢？因为您甚至不能单击图像，因为它不在DOM中。图像位于您的

中，因此应为：

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

此外，还必须计算指针是否位于图像上方。见演示

演示：

重新加载实际上是一种错觉。当你这样做的时候

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

立即执行

reload（）

您真正想要做的是：

myimage.onClick = window.location.reload;

但为什么这是一种幻觉呢？因为您甚至不能单击图像，因为它不在DOM中。图像位于您的

中，因此应为：

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

此外，还必须计算指针是否位于图像上方。见演示

---

演示：

是的，您肯定错过了什么，您必须将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
}

---

是的，如果确实错过了某些内容，则必须将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
}

---

请发布其余的代码。图像甚至没有附加到DOM中的任何位置，如何单击它？请发布其余的代码。图像甚至没有附加到DOM中的任何位置，如何单击它？是的，它不是很明显（根据其他答案）你不能把一个监听器附加到一堆像素上，这就是图像在说了所有的话和做了所有的事情后的结果。非常感谢！这是可行的，尽管这意味着你点击画布上的任何地方都会引起刷新，但有没有办法专门针对画布上的图像？是的，你可以测试光标的坐标是否在图像区域内。@Derek我编辑了我的原始帖子，并回复了你刚才给我看的演示。我没有足够的空间将其全部放在评论中。@Matt-您必须颠倒两个脚本的顺序，这意味着

jquery-1.7.2.js

必须放在第一位。（总是在加载库后放上脚本）是的，你不能立即将一个侦听器附加到一堆像素上，这是图像在说了和做了之后的结果。非常感谢！这是可行的，尽管这意味着你点击画布上的任何地方都会引起刷新，但有没有办法专门针对画布上的图像？是的，你可以测试光标的坐标是否在图像区域内。@Derek我编辑了我的原始帖子，并回复了你刚才给我看的演示。我没有足够的空间将其全部放在评论中。@Matt-您必须颠倒两个脚本的顺序，这意味着

jquery-1.7.2.js

必须放在第一位。（加载库后始终放置脚本）关于如何将侦听器附加到某个对象，您是正确的，但请注意，在当前代码中无法调用此侦听器，因为图像从未添加到文档中。关于如何将侦听器附加到某个对象，您是正确的，但是请注意，在当前代码中无法调用此侦听器，因为从未将图像添加到文档中。