javascript 如何向joint.js 元素添加onclick 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20463533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add an onclick event to a joint.js element?
提问by ahalbert
I have a joint.js element in a DAG, and would like to be able to trigger an event by clicking on it.
我在 DAG 中有一个 Joint.js 元素，希望能够通过单击它来触发一个事件。
I could use $(selector).click(...)to do it, but I was wondering if there was a joint.js specific way of handling it,
since that would probobly be better. One event I decided was a candidate for onclick was 'batch:stop'
我可以$(selector).click(...)用来做它，但我想知道是否有一种 Joint.js 特定的处理方式，因为那可能会更好。我决定作为 onclick 候选的一个事件是“batch:stop”
My code:
我的代码：
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;
How should I add an onclick event?
我应该如何添加 onclick 事件？
回答by dave
The JointJS shapes are models, so you're right that click handlers won't work on them. The JointJS paper triggers events that might be useful to you:
JointJS 形状是模型，所以你是对的，点击处理程序不会对它们起作用。JointJS 论文触发了可能对您有用的事件：
paper.on('cell:pointerdown',
function(cellView, evt, x, y) {
alert('cell view ' + cellView.model.id + ' was clicked');
}
);
other events are: cell:pointerup, cell:pointerdblclick, cell:pointermove.
其他事件有：cell:pointerup、cell:pointerdblclick、cell:pointermove。
The complete list can be found here: http://jointjs.com/api#joint.dia.Paper:events.
完整列表可以在这里找到：http: //jointjs.com/api#joint.dia.Paper: events。
EDIT:
编辑：
Starting from JointJS v0.9, there is also a cell:pointerclickevent.
从 JointJS v0.9 开始，还有一个cell:pointerclick事件。
回答by Nick
You can also use Backbone itself to attach specific events to specific models. JointJS is just Backbone under the hood.
您还可以使用 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
});
