如何将onclick事件添加到joint.js元素？ [英] How to add an onclick event to a joint.js element?

问题描述

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

I have a joint.js element in a DAG, and would like to be able to trigger an event by clicking on it.

我可以使用 $（选择器）.click（...）要做到这一点，但我想知道是否有一个joint.js特定的处理方式，
因为那样会出现问题会更好。我决定的一个事件是onclick的候选人是'批处理：停止'

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'

我的代码：

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

How should I add an onclick event?

推荐答案

JointJS形状是模型，所以你点击处理程序不适用它们是正确的。 JointJS论文触发可能对您有用的事件：

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

其他事件包括：cell：pointerup，cell：pointerdblclick，cell：pointermove。

other events are: cell:pointerup, cell:pointerdblclick, cell:pointermove.

完整列表可在此处找到： http://jointjs.com/ api＃joint.dia.Paper：活动。

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

编辑：

从JointJS v0.9开始，还有一个单元格：pointerclick 事件。

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

这篇关于如何将onclick事件添加到joint.js元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！