Нажмите на поверхность выбирает не ту поверхность

Question

С помощью цикла я создаю 10 различных поверхностей. Нажав на одну из них, я хочу получить содержимое этой поверхности. Но это не работает. вместо этого я всегда получаю содержимое последней созданной поверхности (в моем случае это 9). Что мне нужно изменить, чтобы получить содержимое выбранной (нажатой) поверхности, а не содержимое последней созданной?

вот мой код:

for (f = 0; f < 10; f++) {
        var draggable = new Draggable({
            xRange: [0, 1000],
            yRange: [0, 1000]
        });

        var surface = new Surface({
            size: [true, true],
            content: f,
            properties:{
                fontSize:'16px',
                cursor: 'pointer',
                borderRadius:'50px',
                backgroundColor: '#C0C0C0',
                border:'solid'
            }
        });

        surface.on("click",function(){alert(surface.content)});

        surface.pipe(draggable);        
        mainContext.add(draggable).add(surface);
  }

Answer 1

Правильная поверхность выбирается. Вопрос в ссылке на surface.content функции щелчка. Опорная поверхность заменялась каждый раз, пока не останется последняя поверхность. Ссылка на текущую поверхность нажата с помощью this.content в функции, потому что this привязан к текущей нажатой поверхности в функции щелчка.

Пример кода здесь

for (f = 0; f < 10; f++) {
    var draggable = new Draggable({
        xRange: [0, 1000],
        yRange: [0, 1000]
    });

    var surface = new Surface({
        size: [true, true],
        content: f,
        properties: {
            fontSize: '16px',
            cursor: 'pointer',
            borderRadius: '50px',
            backgroundColor: '#C0C0C0',
            border: 'solid'
        }
    });

    surface.on("click", function () {
        alert(this.content)
    });

    surface.pipe(draggable);
    mainContext.add(draggable).add(surface);
}