Question

我正在使用jointjs绘制图表。

我想知道如何在元素上听鼠标点击事件？我在http://www.jointjs.com/api#joint.dia.Element找到了，只有change:position选项但没有onclick选项lol。

整张纸上只有cell:pointerclick选项，而不是单个元素。

如何实现只在单个元素上听鼠标点击元素？（说我想在点击后调整纸张大小）谢谢！

Answer 1

这样做的方法就是使用类和javascript事件，看看：

首先，通过标记为联合js元素分配一个类，例如在这种情况下称为“myclass”的类：

var rect1 = new joint.shapes.basic.Rect({
markup: '<g class="rotatable"><g class="scalable"><image id="myrect1"  class="myclass"/></g><text/></g>',
    size: { width: 30, height: 73.2 },
    attrs: { 
        rect: { fill: bgcolor1,'stroke-width': 0 },

    }
});

然后，您通过javascript捕获该类对象上的click事件，而不是在画布中但在文档中：

$(document).on('click', '.myclass', function () {
        //alert('yayy!');
});

希望它有所帮助！

Answer 2

您可以使用 pointerclick 事件捕获元素上的点击事件。视图作为参数传递给函数，您可以通过 cellView.model

获取视图的模型

exeptaxis=m

Answer 3

您需要view而不是model。跟踪元素上所有捕获的事件：

var a = new joint.shapes.basic.Rect({
    size: { width: 100, height: 100 },
    position: { x: 300, y: 300 }
}).addTo(graph);

paper.findViewByModel(a).on('all', function() {
    console.log(arguments);
});

https://jsfiddle.net/vtalas/0z6jyq70/

jointjs元素鼠标点击事件

3 个答案: