首页 文章

试图从click事件coffeescript中调用'this'

提问于
浏览 次
2

我'm trying to something in canvas respond when clicked. I'已经从一个函数中添加了一个mousedown事件监听器到一个类 Board

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

javascript html5 canvas coffeescript

3 回答

  • 0

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

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

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

    请注意，在 @ 之后您不需要 . - 您可以编写 @canvas 而不是 @.canvas .

    回复于
  • 0

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

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

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

    回复于
  • 2

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

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

    是我的最终解决方案

    回复于

相关问题