捕捉 HTML5 画布上的点击

Question

我想在我的 HTML5-canvas 上捕捉点击。

我的对象：

mouse =
  position:
    x: 0
    y: 0
    set: (event) ->
      boundaries = canvas.getBoundingClientRect()
      this.position.x = event.clientX - boundaries.left
      this.position.y = event.clientY - boundaries.top

我的事件监听器：

window.addEventListener 'click', (event) ->
  event.preventDefault()
  mouse.position.set event
  console.log "#{mouse.position.x} - #{mouse.position.y}"

错误信息：

TypeError: undefined is not an object (evaluating 'this.position.x = event.clientX - boundaries.left')

这段代码有什么问题？

Answer 1

所以，我有答案：

mouse =
  position:
    x: 0
    y: 0
    set: (event) ->
      boundaries = canvas.getBoundingClientRect()
      mouse.position.x = event.clientX - boundaries.left
      mouse.position.y = event.clientY - boundaries.top

您不应该使用 this 关键字。最好使用正确的对象名称：

• 鼠标.position.x
• 鼠标.position.y

和：

canvas.addEventListener 'click', (event) ->
  event.preventDefault()
  mouse.position.set event
  console.log "#{mouse.position.x} - #{mouse.position.y}"

是的，它有效。