How to add an onclick event to a joint.js element?

Question

I have a joint.js element in a DAG, and would like to be able to trigger an event by clicking on it. 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' 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?

Accepted Answer

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:

```
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.

The complete list can be found here: http://jointjs.com/api#joint.dia.Paper:events.

EDIT:

Starting from JointJS v0.9, there is also a `cell:pointerclick` event.

How to add an onclick event to a joint.js element?

Solution

Problem