javascript - jointjs element mouse click event - Stack Overflow

admin管理员组

文章数量:1355528

I'm using jointjs to draw graphs.

I'm wondering how to listen to the mouse click event on an element? I found on .dia.Element, there is only change:position option but no onclick option lol.

There's only cell:pointerclick option on the whole paper instead of the single element.

How can I achieve only listen to mouse click element on the single element? (Say I want to resize the paper after the click) Thanks!

I'm using jointjs to draw graphs.

I'm wondering how to listen to the mouse click event on an element? I found on http://www.jointjs./api#joint.dia.Element, there is only change:position option but no onclick option lol.

There's only cell:pointerclick option on the whole paper instead of the single element.

How can I achieve only listen to mouse click element on the single element? (Say I want to resize the paper after the click) Thanks!

• javascript
• html
• jointjs

Share Improve this question Follow edited Jul 18, 2016 at 5:31 Mukesh Ram 6,33844 gold badges2020 silver badges3737 bronze badges asked Jul 18, 2016 at 2:08 Kai HuangKai Huang 7311 silver badge1111 bronze badges 3

• Doe this help: stackoverflow./questions/20286603/… – Devon_C_Miller Commented Jul 18, 2016 at 2:31
• I saw this. But how to apply to a single element instead of the whole paper? thanks – Kai Huang Commented Jul 18, 2016 at 8:56
• In short, you don't. The paper provides all the event handlers. This is a good thing. You can add 500 nodes and still have one handler. You can derive your own shapes from the JointJS shapes with .extend(). In the event handler on Paper, you can check the type of the cell and apply type-specific behavior. For instance-specific behavior, you'd still do it in the same handler, but attach attributes to the node that the handler can consult. – Devon_C_Miller Commented Jul 19, 2016 at 17:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can use the pointerclick event to capture the click events on elements. The view is passed as a parameter to the function and you can obtain the model of the view through cellView.model

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

A way to do that it's using classes and javascript events, look:

First, you assign a class to the joint js element via markup , for example a class called 'myclass' in this case:

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 },

    }
});

Then, you capture the click event on that class objects via javascript, not in the canvas but in the document :

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

Hope it helps !

you need to listen on view not on the model. Trace all caught events on the element:

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/vtalas/0z6jyq70/

本文标签： javascriptjointjs element mouse click eventStack Overflow