JointJS

本文介绍了JointJS-鼠标单击事件触发单元格位置更改事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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?

谢谢.

推荐答案

您可以做的是创建一个自定义元素视图，并通过检查是否触发了pointermove事件来从拖动中获得不同的点击在pointerdown和pointerup事件之间.

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

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

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

可以在此处找到小提琴.