Question

点击时，我正在尝试画布中的某些内容。我已经从一个函数，在类Board

中添加了一个mousedown事件监听器到画布

addEvents : () ->
    @.canvas.addEventListener('mousedown',@.mouseDown)
mouseDown : (e) ->
    console.log(e,@)

上面的两个函数在类Board中，当单击画布时，我想从@返回板，但它返回画布。

我尝试将事件监听器/ mousedown函数更改为：

addEvents : () ->
    @.canvas.addEventListener('mousedown',(e)->@.mouseDown(e,@))
mouseDown : (e,@) ->
    console.log(e,@)

但这会引发unexpected PARAM_END

的错误

Answer 1

正如您似乎已经想到的那样，您需要使用胖箭=>在函数体内词汇绑定this（又名@）。

class Board
  constructor: (@canvas) ->
  addEvent: ->
    @canvas.addEventListener 'mousedown', @mouseDown
  mouseDown: (event) =>       
    # handle the event here

使用mouseDown方法的胖箭头意味着@在函数内部而不是在调用中被词义定义...所以它是你的class的实例>在代码中查看而不是事件的接收者（DOM元素）。

请注意，.之后您不需要@ - 您可以写@canvas代替@.canvas。

Answer 2

您需要从函数返回@ ...

addEvents : () ->
    @.canvas.addEventListener('mousedown',@.mouseDown)
    return @
mouseDown : (e) ->
    console.log(e,@)

你仍然可以在Coffee ...中明确地做返回。

Answer 3

感谢那个因为把我推向正确方向而删除了他的答案的人，

@.canvas.addEventListener('mousedown',(e) => @.mouseDown(e))

是我的最终解决方案

试图从点击事件coffeescript中调用'this'

3 个答案: