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事件

回答

相關問題