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

两盒软妹~` 提交于 2020-01-01 04:34:14

问题


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?


回答1:


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.




回答2:


You can also use Backbone itself to attach specific events to specific models. JointJS is just Backbone under the hood.

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


来源:https://stackoverflow.com/questions/20463533/how-to-add-an-onclick-event-to-a-joint-js-element

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!