Javascript 向for循环中的多个点添加事件侦听器

假设我有以下代码，事件似乎只是时不时地触发，举下面两个例子

第一个例子，这非常有效，事件按预期每次都会触发

for (var i = 0; i < items; i++) {
            var rect = new Kinetic.Rect({
                x: 0,
                y: 1+i,
                width: 100,
                height: 2,
                fill: 'green'
            });
            rect.on('mouseover', function(evt) {
                $('#console').text(evt.shape.index);
            });
            layer.add(rect);
        }

for（变量i=0；i

行动中的观点

我的问题是，在事件上添加旋转值时，似乎无法正确触发

for (var i = 0; i < items; i++) {
            var rect = new Kinetic.Rect({
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                width: 100,
                height: 1,
                fill: 'green'
            });
            rect.on('mouseover', function(evt) {
                console.log(evt.shape.index);
                $('#console').text(evt.shape.index);
            });
            rect.rotate(i * angularSpeed / items);
            // add the shape to the layer
            layer.add(rect);
        }

for（变量i=0；i

行动中的观点

---

在这方面的任何帮助都会很好，在这里花了几个小时，找不到有效的解决方案？

节点太“薄”且重叠太多，事件无法正常触发

尝试增加每个节点的高度并添加较少的节点。
例如，将

i++

替换为

i+=3

，并将

高度增加到
2

for (var i = 0; i < 800; i += 3) {
    var rect = new Kinetic.Rect({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        width: 100,
        height: 2,
        fill: 'green'
    });
    // ...
}

for（变量i=0；i<800；i+=3）{
var rect=新的动能.rect({
x:stage.getWidth（）/2，
y:stage.getHeight（）/2，
宽度：100，
身高：2，
填充：“绿色”
});
// ...
}
节点太薄，重叠太多，事件无法正常触发

尝试增加每个节点的高度并添加较少的节点。

例如，将
i++
替换为
i+=3
，并将
高度增加到
2

for (var i = 0; i < 800; i += 3) {
    var rect = new Kinetic.Rect({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        width: 100,
        height: 2,
        fill: 'green'
    });
    // ...
}

for（变量i=0；i<800；i+=3）{
var rect=新的动能.rect({
x:stage.getWidth（）/2，
y:stage.getHeight（）/2，
宽度：100，
身高：2，
填充：“绿色”
});
// ...
}