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

Question

我在DAG中有一个joint.js元素，并希望能够通过单击它来触发事件。

我可以使用$(selector).click(...)实现这一点，但我想知道是否有特定于joint.js的处理方式，因为那可能更好。我决定将'batch:stop'事件作为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 事件？

- ahalbert

Answer 1

JointJS 的形状是模型，因此您说得对，点击处理程序不会在它们上起作用。 JointJS paper 触发事件可能对您有用：

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事件。

- dave

---

谢谢。我读错了事件文档的相关部分，因为我以为它与元素对象有关。 - ahalbert

@dave，你能否帮忙回答一下这个问题：http://stackoverflow.com/questions/31794098/error-while-fetching-json-from-database？ - kittu

我正在尝试在单击jointjs元素内的HTML链接时触发一个函数。如何实现？ - 32teeths

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

- Nick