Javascript 如何禁用和启用单击KinectJS形状？

假设我为每个元素创建一个tween，并将每个tween推到一个数组中：

var myArray = [];

data.on('click', function () {
    var layer = this.parent.parent;
    var elements = layer.get(".element");

    elements.each(function (element) {
        myTween = new Kinetic.Tween({
            node: elements[0],
            angleDeg: 60,
            easing: Kinetic.Easings.EaseInOut,
            rotationDeg: 180
        }).play();
        myArray.push(myTween );
    });
})

然后我在数组中循环，在单击按钮时应用反向（）

button.on('click', function () {
    for (var i = 0; i < myArray.length; i++) {
        myArray[i].reverse();
    }
}, false);

按钮。在（'click'，函数（）{
对于（var i=0；i

我试图实现的是在tween之后禁用click事件，这样我就可以应用reverse（），并且只有在调用reverse之后，才能再次启用元素click

出于某种原因，多次单击某个元素会破坏相反的结果，它会做一些奇怪的事情

因此，它将执行以下操作：

单击元素

吐温元素

禁用单击元素

点击反转按钮

反向元件

启用单击元素

如何实现这一点？

您可以使用

.off（）

函数解除事件绑定：

您已经知道如何使用

.on（）

函数

为了使事情变得更简单，请将

.on（）

函数放入自定义函数中，在本例中，我将其称为

bindTweenClick（）

单击数据后，使用

.off（'click'）

当您单击

按钮时

将二者反向，然后重新绑定事件

function bindTweenClick() {
  data.on('click', function () {
    var layer = this.parent.parent;
    var elements = layer.get(".element");

    elements.each(function (element) {
      myTween = new Kinetic.Tween({
        node: elements[0],
        angleDeg: 60,
        easing: Kinetic.Easings.EaseInOut,
        rotationDeg: 180
      }).play();
      myArray.push(myTween );
    });
    this.off('click');
  })
}(); // <-- Self Invoke

button.on('click', function () {
  for (var i = 0; i < myArray.length; i++) {
    myArray[i].reverse();
  }
  bindTweenClick();
}, false);

这样，您就不会每次单击都创建一个新的Tween，这会更新相关节点的位置，从而导致不希望出现的Tween效应（并使

tweenArray

人口过多）

---

我已经更新了原始版本

再次感谢您。答应我，我会给你看完成的项目。你会喜欢的。期待着它！：）

elements = stage.get('Rect');
var tweenArray = [];

elements.each(function (element) {
  var tween = new Kinetic.Tween({
    node: element,
    rotationDeg: 180
  });
  tweenArray.push(tween);
});

// reverse tween
document.getElementById('reverse').addEventListener('click', function () {
  for (var i = 0; i < tweenArray.length; i++) {
    tweenArray[i].reverse();
  }
}, false);

// play tween forward
document.getElementById('play').addEventListener('click', function () {
  for (var i = 0; i < tweenArray.length; i++) {
    tweenArray[i].play();
  }
}, false);