如何將onclick事件添加到joint.js元素？

Question

我在DAG中有一個joint.js元素，並希望能夠通過單擊它來觸發事件。

我可以使用$(selector).click(...)來做它，但我想知道是否有一個joint.js特定的處理方式，因為這可能會更好。 我決定的一個事件是onclick的候選人是'批處理：停止'

我的代碼：

 var variable =  new joint.shapes.basic.Rect({
     name : label,
     id: label,
     onclick : function () {alert("hello");},
     size: { width: width, height: height },
     attrs: {
         text: { text: label, 'font-size': letterSize, 'font-family': 'monospace' },
         rect: {
             fill : fillColor, 
             width: width, height: height,
             rx: 5, ry: 5,
             stroke: '#555'
         }   
     }   
 }); 
 variable.on('batch:stop', function (element) {alert(""); toggleEvidence(element.name);});
 return variable;

我應該如何添加onclick事件？

Answer 1

JointJS形狀是模型，因此您點擊處理程序無法使用它們是正確的。 JointJS論文觸發了可能對您有用的事件：

paper.on('cell:pointerdown', 
    function(cellView, evt, x, y) { 
        alert('cell view ' + cellView.model.id + ' was clicked'); 
    }
);

其他事件有：cell：pointerup，cell：pointerdblclick，cell：pointermove。

完整列表可以在這里找到： http ： //jointjs.com/api#joint.dia.Paper : events 。

編輯 ：

從JointJS v0.9開始，還有一個cell:pointerclick事件。

Answer 2

您還可以使用Backbone本身將特定事件附加到特定模型。 JointJS只是引擎蓋下的Backbone。

const newElement = new jointjs.shapes.devs.Model({....});
graph.addCell(newElement);

newElement
  .findView(paper)
  .$el.find('.Settings') // this is nested in the model / cell
  .click(() => {
    // do something
  });