Javascript - onClick事件

所以我现在有一个画布上的图像，我希望页面重新加载，一旦你点击图像。问题在于，只要调用“Go”函数就会重新加载页面，而不是启动单击事件时。这是一点代码。Javascript - onClick事件

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

    ctx.drawImage(myimage, 294, 100); 

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

我觉得我失去了一些微不足道的东西，任何帮助将不胜感激。

谢谢。

问候，

马特

编辑：增加了对德里克。

Hey Derek I really appreciate the help. I'm going to be real noob with you for a second as I'm pretty new to coding. So I'm trying to implement the demo code you've shown me on my test website here but the error I get back is "Uncaught ReferenceError: $ is not defined".

Now what I know is that "$" is a jQuery symbol, now I'm pretty new to coding/javascript in general so just imagine how new I am to javascript libraries (jQuery).

I've downloaded jQuery and put it in the same directory then added this line to the html:

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

Am I doing something wrong? Why is it not picking up on the jquery library?

来源

2012-05-30 Matt

请张贴剩下的代码。 – j08691

图像甚至没有被添加到DOM中的任何地方，你怎么点击它？ –

的 “重装” 是实际上是一个错觉。当你这样做

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/

来源

2012-05-30 03:00:31

是的，它不是立即显而易见的（通过其他答案），你不能将一个听众附加到一堆像素上，这就是当所有的说法和完成时图像所呈现的形象。 –

非常感谢！尽管这意味着你点击画布上的任何地方都会导致刷新，但是有没有一种方法可以专门定位画布上的图像？ – Matt

是的，你可以测试光标的坐标是否在图像的区域内。 –

那是因为你马上打电话reload通过()。

myimage.onClick = window.location.reload;

编辑： 你不能获得图像上触发click事件，你应该绑定到像现有的DOM元素：

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

来源

2012-05-30 02:57:45 xdazz

关于如何将侦听器追加到某个东西是正确的，但请注意，此侦听器无法在当前代码中调用，因为图像永远不会被添加到文档中。 –

@ Dr.Dredel是，编辑了我的答案。 – xdazz

是的，当然你错过的东西，你必须通过window.location.reload作为回调（不要把parenthess），试试这个：

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-30 03:01:17

Javascript - onClick事件

回答

相关问题