html5 canvas obj.addEventListener未定義

Question

我試圖單擊一個畫布並獲取鼠標位置，類似於Getting mouse location in canvas。

var board = new function(){ 
    this.id = document.getElementById("board"); 
    this.ctx = this.id.getContext("2d"); 
} 

function newGame(piece) { 
    drawGrid(); 
    board.addEventListener("click", getMousePosition); 
    if (piece == "X") { 
     players.player = "X"; 
     players.computer = "O"; 
    } else { 
     players.player = "O"; 
     players.computer = "X"; 
    } 
} 

我一直在囤積我的大腦和互聯網試圖解決這個問題。有Cannot attach Event listener to canvas?但我沒有使用getElementsByTagName。我看着MouseMove issue on canvas，但我的畫布不應該超出我定義它的範圍。 event listener on canvas in html5 issue沒有幫助，因爲我沒有試圖將監聽器添加到上下文中。有人能告訴我發生了什麼事嗎？

https://codepen.io/csinclair/pen/owVqyq

Answer 1

的元素是board.id，不對板。

應該是 board.id.addEventListener("click", getMousePosition);