Javascript Kineticjs鼠标悬停并单击

我正在用kineticjs做一个棋盘游戏，我面临着鼠标操作的问题

我有一个带有mousemove事件的图像，可以绘制预览选择

问题在于同一图像上的单击事件仅触发1对9次

如果我移除on_鼠标移动on_鼠标，则on_单击功能将正常工作

有人有解释和/或解决方法吗

谢谢

---

编辑

小提琴链接：

---

---

您的代码有点凌乱，所以我将其清理干净，现在可以使用了：

在函数

createSquareItem（）

中，

squareLayer

未定义

只需添加一次Kinetic.Layers。在这两个

createSquareItem

createTemporarySquareItems

函数中，每次调用函数时都将

mainLayer

添加到后台。这是错误的，因为您已经将

mainLayer

添加到了前面的阶段

在您的

createTemporarySquareItems

函数中，我必须添加

mainLayer.drawsecene（）

，在

createSquareItem

中，我必须添加

mainLayer.draw（）

---

有关KineticJS绘制方法的更多信息，请参见此处：

那么您是否必须单击图像才能开始绘制预览选择？或者你只需将鼠标移到图像上，它就会开始绘图？需要更多的细节，如果您向我们展示一些代码或jsfiddle，将更容易提供帮助！我添加了一个小提琴的例子

function createSquareItem(point, color) {
    var boardPoint = point;

    var rect = new Kinetic.Rect({
        x: boardPoint.x,
        y: boardPoint.y,
        width: 18,
        height: 18,
        fill: color,
        stroke: 'black',
        strokeWidth: 0
    });

    mainLayer.add(rect);
    //squareLayer.drawScene(); //squareLayer is undefined.
    mainLayer.draw();
}

function createTemporarySquareItems(point, cleanLayer) {
    if (cleanLayer == true) {
        do {
            var r = tempSquareArray.pop();
            if (r != null) {
                //tempSquareLayer.remove(r);
                r.destroy();
            }
        } while (r != null);
    }

    var boardPoint = point;

    var rect = new Kinetic.Rect({
        x: boardPoint.x,
        y: boardPoint.y,
        width: 18,
        height: 18,
        fill: 'orange',
        stroke: null,
        strokeWidth: 0
    });

    tempSquareArray.push(rect);

    mainLayer.add(rect);
    mainLayer.drawScene();
}