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);