JointJS-鼠标点击事件触发单元格位置更改事件

JointJS - Mouse click event triggers cell position change event

本文关键字：事件 单元格 位置 鼠标 JointJS-      更新时间：2023-12-22

我需要为每个单元格定义鼠标单击事件。我使用了cell:pointerup事件；但是当I也改变细胞的位置时，该事件被触发。如何区分这两个事件？

提前谢谢。

您可以创建一个自定义元素视图，并通过检查pointerdown和pointerup事件之间是否触发了pointermove事件来区别单击和拖动。

var ClickableView = joint.dia.ElementView.extend({
  pointerdown: function () {
    this._click = true;
    joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
  },
  pointermove: function () {
    this._click = false;
    joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
  },
  pointerup: function (evt, x, y) {
    if (this._click) {
      // triggers an event on the paper and the element itself
      this.notify('cell:click', evt, x, y); 
    } else {
      joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
    }
  }
});

然后告诉joint.dia.Paper使用该视图。

var paper = new joint.dia.Paper({
  // el, width, height etc.
  elementView: ClickableView
});

在这里可以找到一把小提琴。

相关文章：