JointJS - Mouse click event triggers cell position change event

我的梦境 提交于 2019-12-23 04:48:25

问题


I need to define mouse click event for my each cell. I used cell:pointerup event; but this event is triggered when I change positions of cells too. How can I differentiate these 2 events?

Thanks in advance.


回答1:


What you can do is to create a custom element view and distinct click from dragging by checking whether a pointermove event was triggered between pointerdown and pointerup events.

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);
    }
  }
});

And then tell the joint.dia.Paper to use the view.

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

A fiddle can be found here.



来源:https://stackoverflow.com/questions/20286603/jointjs-mouse-click-event-triggers-cell-position-change-event

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!