Question

所以我目前在画布上有一个图像，我希望一旦你点击图像就重新加载页面。问题是，一旦调用“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();
}

我觉得我缺少一些微不足道的东西，任何帮助都会受到赞赏。

感谢。

此致

马特

编辑：为Derek添加。

  嘿Derek我非常感谢你的帮助。我会成为现实   noob和你在一起，因为我对编码很新。所以我正在努力   实现你在我的测试网站上展示的演示代码   here但错误我   回来是“未捕获的ReferenceError：$未定义”。

现在我所知道的是“$”是一个jQuery符号，现在我很新   编码/ javascript一般，所以想象一下我对javascript有多新   库（jQuery）。

我已下载jQuery并将其放在同一目录中然后添加   这行到html：

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

我做错了吗？为什么它没有接受jquery 库中？

Answer 1

这是因为您通过reload立即致电()。

myimage.onClick = window.location.reload;

修改 的并且您无法在图像上触发单击事件，您应该绑定到现有的dom元素，如：

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

Answer 2

“重新加载”实际上是幻觉。当你这样做

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

reload()立刻就会被解雇。

你真正打算做的是：

myimage.onClick = window.location.reload;

但为什么这是幻觉呢？因为您甚至无法单击该图像，因为它在DOM中无处。该图片位于<canvas>，因此应为：

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

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

DEMO： http://jsfiddle.net/DerekL/QuAVc/

Answer 3

是的，确定你错过了什么，你必须传递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
}

Javascript - onClick事件

3 个答案: