グラフを描画するのにjointjsを使用しています。jointjs要素のマウスクリックイベント
要素のマウスクリックイベントをどのように聴くのでしょうか？ http://www.jointjs.com/api#joint.dia.Elementに見つかったのは、change:positionオプションのみですが、onclickオプションlolはありません。
単一の要素ではなく、用紙全体にcell:pointerclickオプションがあります。
どのようにして、単一要素のマウスクリック要素だけを聞くことができますか？ （私はクリック後に用紙のサイズを変更したいと言う） ありがとう！
あなたはmodelではなく、viewで聞く必要があります。要素のすべてのキャッチイベントをトレース：
var a = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 300, y: 300 }
}).addTo(graph);
paper.findViewByModel(a).on('all', function() {
console.log(arguments);
});
あなたは要素のclickイベントをキャプチャするpointerclickイベントを使用することができます。 ビューが関数にパラメータとして渡され、あなたがcellView.model
paper.on('cell:pointerclick', function (cellView) {
// your logic goes here
);
それはクラスやJavaScriptのイベントを使っていることを実行する方法を通じてビューのモデルを得ることができ、見て：
まず、あなたは例えば、マークアップを介した共同jsの要素に、この場合には「MyClassの」と呼ばれるクラスをクラスを割り当てる：
var rect1 = new joint.shapes.basic.Rect({
markup: '<g class="rotatable"><g class="scalable"><image id="myrect1" class="myclass"/></g><text/></g>',
size: { width: 30, height: 73.2 },
attrs: {
rect: { fill: bgcolor1,'stroke-width': 0 },
}
});
次に、あなたが目にクリックイベントをキャプチャJavaScriptで、ないキャンバスではなく、ドキュメント内のクラスオブジェクトで：
$(document).on('click', '.myclass', function() {
//alert('yayy!');
});
はそれが役に立てば幸い！
Doeヘルプ：http://stackoverflow.com/questions/20286603/jointjs-mouse-click-event-triggers-cell-position-change-event –
私はこれを見ました。しかし、紙全体ではなく単一の要素にどのように適用するのですか？ありがとうございます –
要するに、あなたはしません。このペーパーはすべてのイベントハンドラを提供しています。これは良いことです。 500ノードを追加しても、まだ1つのハンドラを持つことができます。あなたは '.extend（）'でJointJS図形から独自の図形を派生させることができます。 Paperのイベントハンドラでは、セルのタイプをチェックし、タイプ固有の動作を適用できます。インスタンス固有の動作については、同じハンドラでもやりますが、ハンドラが参照できるノードにアトリビュートを添付します。 –