html5画布kineticjs事件

我似乎有一个问题，让事件使用一个1或更少的冲程在一个动能线上发射。我认为将所有行添加到一个组中，然后将事件附加到一个组中就足够了，但它不起作用

我已经简化了我试图完成的代码，以缩短帖子：

var gridOffsetX = 45, gridHeight = 200, gridWidth = 760, rowHeight = gridHeight / 4;
var stage, baseLayer = new Kinetic.Layer();

// debug message
var debugText = new Kinetic.Text({
    fontStyle: 'bold', fontSize: 12, fill: 'red',
    x: 45, y: gridHeight + 10, text: 'mouseup'
});

window.onload = function () {

    stage = new Kinetic.Stage({
        container: 'canvas',
        width: 800, height: 200 + 22
    });

    var index = 0.5;
    var yPosition = (gridHeight / 4 * index);

    // create the base object
    var text = new Kinetic.Text({
        fontStyle: "bold", fontSize: 10, fill: "black",
        x: 0, y: yPosition, text: "Row A", align: "right"
    });

    // center the text
    text.offsetY(text.height() / 2);
    baseLayer.add(text);
    baseLayer.add(addStatusText(text, ++index, "Row B"));
    baseLayer.add(addStatusText(text, ++index, "Row C"));
    baseLayer.add(addStatusText(text, ++index, "Row D"));

    var gridGroup = new Kinetic.Group();

    drawGrid(gridGroup);
    wireGridEvents(gridGroup);

    baseLayer.add(gridGroup);
    baseLayer.add(debugText);
    stage.add(baseLayer);
};

function addStatusText(control, index, text) {
    var yPosition = (gridHeight / 4 * index);

    control = control.clone({ text: text, y: yPosition });
    control.offsetY(control.height() / 2);

    return control;
}

function drawGrid(gridGroup) {

    var rect = new Kinetic.Rect({
        x: gridOffsetX, y: 0,
        width: gridWidth, height: gridHeight,
        stroke: "black", strokeWidth: 1
    });

    gridGroup.add(rect);

    var t1, t2, index1;

    for (index1 = 1; index1 <= 3; index1++) {
        t2 = (gridHeight / 4 * index1);
        gridGroup.add(drawGridLine(gridOffsetX, t2, gridOffsetX + gridWidth, t2));
    }

    for (index1 = 1; index1 < 48; index1++) {
        t1 = gridOffsetX + (gridWidth / 48) * index1;
        gridGroup.add(drawGridLine(t1, 0, t1, gridHeight));
    }
}

function drawGridLine(startX, startY, endX, endY) {
    return new Kinetic.Line({
        points: [startX, startY, endX, endY],
        stroke: 'black', strokeWidth: 0.5
    });
}

function wireGridEvents(group) {
    group.on('mousedown', function () { writeMessage('mousedown'); });
    group.on('mouseup', function () { writeMessage('mouseup'); });
}

function writeMessage(message) {
    debugText.text(message);
    baseLayer.draw();
}

var gridOffsetX=45，gridHeight=200，gridWidth=760，rowHeight=gridHeight/4；
var阶段，基层=新动能层（）；
//调试消息
var debugText=new dynamic.Text({
字体样式：“粗体”，字体大小：12，填充：“红色”，
x:45，y:gridHeight+10，文本：“鼠标悬停”
});
window.onload=函数（）{
阶段=新的动力学阶段({
容器：“画布”，
宽度：800，高度：200+22
});
var指数=0.5；
变量yPosition=（网格高度/4*索引）；
//创建基础对象
var text=新的dynamic.text({
字体样式：“粗体”，字体大小：10，填充：“黑色”，
x:0，y:y位置，文本：“A行”，对齐：“右”
});
//将文本居中
text.offsetY（text.height（）/2）；
添加（文本）；
添加（addStatusText（文本，++索引，“B行”）；
添加（addStatusText（文本，++索引，“C行”）；
添加（addStatusText（文本，++索引，“D行”）；
var gridGroup=new dynamic.Group（）；
drawGrid（gridGroup）；
wireGridEvents（gridGroup）；
添加（gridGroup）；
添加（调试文本）；
阶段。添加（基层）；
};
函数addStatusText（控件、索引、文本）{
变量yPosition=（网格高度/4*索引）；
control=control.clone（{text:text，y:yPosition}）；
control.offsetY（control.height（）/2）；
返回控制；
}
函数drawGrid（gridGroup）{
var rect=新的动能.rect({
x:gridOffsetX，y:0，
宽度：网格宽度，高度：网格高度，
笔划：“黑色”，笔划宽度：1
});
gridGroup.add（rect）；
变量t1，t2，index1；
对于（index1=1；index1，这实际上是KineticJS中关于组、形状、鼠标事件和别名的bug，两天前由@lavrton解决。另请参阅github上的问题（以及其他3个相关问题）

我更新了您的fiddle以使用此最新提交的代码，然后它工作正常：。因此，更新您的项目以使用此最新的KineticJS“版本”，应该可以解决您的问题（从github下载，而不是从
KineticJS.com
网站下载）

顺便说一句，你在你的小提琴版本中描述的行为也会发生在笔划为2或更大的时候。大约在线条的中心，事件不会发生。
太棒了！感谢大家指出@Sjiep！正如你所指出的，效果很好！我会投票支持你，但显然我还没有足够的代表性：p