0

次のコードでは、on "click"イベントを持つ長方形が10個あるため、イベントは最初（ページの読み込み時）に10回呼び出されます。しかし、実際に長方形をクリックしたときのイベントは何の影響も及ぼしません。

ここにコードがあります（扱いやすくするために画像をrectに置き換えました）：

width = window.innerWidth   || document.documentElement.clientWidth || document.body.clientWidth || 0
height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0

class Gallery 
    constructor: (config) -> 
        @first_xpos          = 0
        @first_ypos          = 0
        @vertical_spacing    = 20
        @horizontal_spacing  = 10
        @current_xpos        = @first_xpos
        @current_ypos        = @first_ypos
        @current_img_in_line = 1
        @max_pics_in_line    = 3
        @stage       = new Kinetic.Stage(config)
        @images_layer = new Kinetic.Layer
        @message_layer = new Kinetic.Layer()
        @image_width = 100
        @image_height = 100

    addImages: () ->
        for i in [0...10]
          ori = new Kinetic.Rect
                    x: @current_xpos 
                    y: @current_ypos
                    fill: 'green'
                    draggable: false
                    width: @image_width
                    height: @image_height
          ori.on('click', @.testfunc() )
          @images_layer.add ori
          @calculate_position()
        @stage.add @images_layer
        @stage.add @message_layer

    testfunc:  -> 
        console.log "event when is_clicked"

    calculate_position: ->
        @current_img_in_line++
        @current_xpos = @current_xpos + @image_width + @horizontal_spacing
        if @current_img_in_line > @max_pics_in_line
           @current_xpos = @first_xpos
           @current_ypos = @current_ypos + @vertical_spacing + @image_height
           @current_img_in_line = 1

window.onload = -> 
  stage = new Gallery
                container: "gallery_container"
                width:  width
                height: height
   stage.addImages()
4

1 に答える 1

1

ここでのエラー：

ori.on('click', @.testfunc() )

"this"（ "@"）はGalleryクラスのインスタンスではありません。「@」はKinetic.Rectインスタンスにリンクされています。あなたはこれを行うことができます：

ori.on 'click', =>
  @testfunc()

「=>」がコーヒーでどのように機能するか：http ：//coffeescript.org/#fat_arrow 編集したコード：http：//jsfiddle.net/lavrton/tDVy6/3/

于 2013-01-29T01:46:43.777 に答える