javascript - Kineticjs 鼠标悬停并单击

Question

我正在使用 kineticjs 开发棋盘游戏，但我遇到了鼠标处理问题。

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

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

如果我删除 on_mousemove on_click 工作正常..

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

谢谢

---

编辑

小提琴链接： http: //fiddle.jshell.net/gTuCE/12/

---

Answer 1

你的代码有点乱，所以我清理了它，它现在可以工作了：jsfiddle

1. 在您的函数createSquareItem()中，squareLayer未定义。

2. 您只需添加 Kinetic.Layers 一次。在您的两个函数中，每次调用该函数时createSquareItem createTemporarySquareItems，您都会添加到舞台上。mainLayer这是错误的，因为您之前已经添加mainLayer到阶段。

3. 在你的createTemporarySquareItems函数中，我必须添加mainLayer.drawScene()并且createSquareItem我必须添加mainLayer.draw()

   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();
   }
   

有关 KineticJS 绘制方法的更多信息，请参见此处：KineticJS 绘制方法之间有什么区别？