Question

我需要你的帮助，因为我仍然遇到事件处理问题。这是概念：

要进行语境化，假设我有视觉项目，我称之为“组件”。组件由2个javascript对象定义。一个包含数据（如位置x，y，宽度，高度，颜色等......）。另一个是利用名为draw2d的第三方库的视图。 Draw2d使用它自己的x y宽度高度颜色等...属性。这意味着我需要“绑定”值以始终保持它们等于。

为此，我只使用事件。 draw2d中有'on'事件让我看到这些修改。对于角度方面，我只是直接在我的数据绑定上使用ng-model指令。更新数据时，我更新了draw2d视图，当编辑视图时，我更新了我的数据。这部分工作正常，因为这并不难处理。

然后我尝试实现多选编辑。为此，我将每个选定的组件存储在一个数组中。当编辑来自视图或数据的值时，我触发一个事件，让每个选定的组件将相同的数据设置为相同的值。再次，它运作良好。

在我开始努力奋斗的时候，我想要编辑位置。我不希望每个组件都在彼此之上。为此，当我编辑多个x或y属性而不是定位元素时，我计算偏移量，以便每个组件仅以此偏移量移动。这是不合适的地方。当然，当设置偏移时，其他组件会更新，同时触发它们的新值，所以我陷入了地狱循环。

我想知道你是否知道任何处理事件的模式，这样当你有2个视图和模型时，你可以阻止事件传播。

这是我的传播片段：

scope.canvas.on('figureEdited', function (canvas, event) {
      if (scope.selectedComponents.length > 1) {
        var key = event.key;
        var value = event.value;
        var originComponent = event.origin;
        for (var i = 0; i < scope.selectedComponents.length; i++) {
          var selectedComponent = scope.selectedComponents[i];
          if (selectedComponent !== originComponent) {
            if (key !== 'x' && key !== 'y') {
              selectedComponent.setData(key, value);
            } else {
              var offset = value - event.oldValue;
              selectedComponent.setData(key, selectedComponent.getData(key) + offset, true);
            }
          }
        }
      }
    });

问题是由

引起的

selectedComponent.setData(key, selectedComponent.getData(key) + offset, true);

它重新触发了一个figureEdited事件，使每个组件再次通过此偏移量无限移动（停止10次摘要迭代）。

我希望这很清楚，对于长文本感到抱歉，非常感谢你的帮助:)。

Alann。

Answer 1

如果setData调用同步触发新事件，则可以通过设置ignore标志并在函数开头检查它来忽略循环中触发的事件。

^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$

Angular - 阻止事件循环？

1 个答案: