Question

以下是代码。我的期望是当我在圈子上盘旋时，他们应该显示＆＃34;圈0＆＃34;和＆＃34;圈1＆＃34;分别。但是他们都表现出了＃1; Circle 1＆＃34;。

为什么会这样以及如何解决它。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
    <script defer="defer">
      function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var text = new Kinetic.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'black'
      });

      for (var n=0; n<2; ++n)
      {
          var circle = new Kinetic.Circle({
            x: 100 + n * 100,
            y: stage.height()/2,
            radius: 30,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4
          });
          var txt = 'Circle ' + n;
          circle.on('mouseover', function() {
            writeMessage(txt);
          });
          circle.on('mouseout', function() {
            writeMessage('');
          });
          layer.add(circle);
      }

      layer.add(text);
      stage.add(layer);
    </script>
  </body>
</html>

Answer 1

这不是Kinetic的问题，它与JavaScript闭包有关。

您在循环中定义了一个函数：

for (var n=0; n<2; ++n) {
  ...
  var txt = 'Circle ' + n;
  circle.on('mouseover', function() {
    writeMessage(txt);
  });
  ...
}

声明函数时，不会复制变量txt。问题是，当您的匿名函数被调用时，txt的值为'Circle 1'（因为for已完成，并且在循环期间修改了txt。

您需要一个中间功能：

var displayMessage = function (circleNumber) {
  var txt = 'Circle ' + circleNumber;
  return function () {
    writeMessage(txt);
  };
};

现在您的事件绑定：

circle.on('mouseover', displayMessage(n));

看到这个小提琴：http://jsfiddle.net/GApn7/

如果您想了解更多相关信息，请阅读以下文章：How do JavaScript closures work?

关于Kinetic JS的事件收听

1 个答案: