jointjs 元素鼠标点击事件答案

【问题标题】：jointjs element mouse click eventjointjs 元素鼠标点击事件
【发布时间】：2016-07-18 02:08:36
【问题描述】：

我正在使用jointjs 来绘制图表。

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

整篇论文只有cell:pointerclick 选项，而不是单个元素。

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

【问题讨论】：

请帮忙：*.com/questions/20286603/…
我看到了这个。但是如何应用于单个元素而不是整篇论文呢？谢谢
简而言之，你没有。本文提供了所有事件处理程序。这是一件好事。您可以添加 500 个节点，但仍然有一个处理程序。您可以使用.extend() 从 JointJS 形状派生出您自己的形状。在 Paper 上的事件处理程序中，您可以检查单元格的类型并应用特定于类型的行为。对于特定于实例的行为，您仍然可以在同一个处理程序中执行此操作，但将属性附加到处理程序可以查询的节点。

标签： javascript html jointjs

【解决方案1】：

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

获取view的模型

paper.on('cell:pointerclick', function (cellView) {
   // your logic goes here
);

【讨论】：

【解决方案2】：

一种使用类和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 捕获该类对象上的点击事件，而不是在画布中，而是在文档中：

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

希望对你有帮助！

【讨论】：

【解决方案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/

【讨论】：