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

Question

我需要为每个单元格定义鼠标点击事件。我使用了cell:pointerup 事件；但是当我也更改单元格的位置时会触发此事件。如何区分这 2 个事件？

提前致谢。

Answer 1

您可以做的是创建一个自定义元素视图，并通过检查是否在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
});

可以在here找到一个小提琴。