将事件添加到网格的 coffeescript 实现

Question

我找到了 hexgrid 的 coffeescript 实现，它使用 Raphael 将网格绘制到 DOM。 Cell 对象的代码如下：

class Cell
  constructor: (r,coords) ->
    [ @r, @x, @y ] = [ r, coords.x, coords.y ]
    @colors =
      "bright": "#AAAAAA"
      "dim": "#8d9794"
      "blue": "#1e725b"
      "bright-blue": "#3f947d"
    @clicked = false
    @draw()
  path: ->
    "m0,0 -15.373745,26.6281 -30.74749,0 -15.373745,-26.6281 15.373745,-26.6281 30.74749,0 z"
  draw: ->
    @drawCell()
    @attachHandlers()
  drawCell: ->
    @cell = @r.path @path()
    @cell.attr
      "fill": @colors['dim']
      "stroke-width": 2
      "stroke": "#5f6664"
    @cell.transform "t#{@x},#{@y}s1"
  changeColor: (c) ->
    @cell.attr "fill": @colors[c]
  doClick: =>
    @clicked = not @clicked
    @hovered()
  hovered: =>
    @cell.toFront()
    if @clicked then @changeColor 'bright-blue' else @changeColor 'bright'
    @cell.animate transform: "t#{@x},#{@y}s1.2", 1000, 'bounce'
  unhovered: =>
    if @clicked then @changeColor 'blue' else @changeColor 'dim'
    @cell.animate transform: "t#{@x},#{@y}s1", 1000, 'bounce'
  attachHandlers: ->
    @cell.hover @hovered, @unhovered
    @cell.click @doClick

我的目标是将鼠标悬停在任何单个单元格上时将光标变成指针。我在悬停方法中尝试了以下各种组合，但无济于事：

@cell.mouseover(function(){
        container.css('cursor','pointer');
}
@cell.mouseout(function(){
        container.css('cursor','default');
}

这里有可用的代码笔：http://codepen.io/drshoggoth/pen/nArtC

Answer 1

更改游标的设计是设计的一部分，而不是逻辑。所以我建议只使用 css

path {
  &:hover {cursor:pointer}
}

否则在第 29 行后添加

@cell.attr('cursor','pointer');

见http://codepen.io/SaschaKluth/pen/GZXYmr

将事件添加到网格的 coffeescript 实现

Adding events to a coffeescript implementation of a grid

javascript

raphael

coffeescript