Событие щелчка мыши элемента joinjs

Я использую jointjs для рисования графиков.

Мне интересно, как прослушать событие щелчка мыши на элементе? Я нашел на http://www.jointjs.com/api#joint.dia.Element, есть только опция change:position, но нет опции onclick, лол.

На всей бумаге есть только вариант cell:pointerclick вместо одного элемента.

Как я могу добиться только прослушивания элемента щелчка мыши на одном элементе? (Скажем, я хочу изменить размер бумаги после щелчка) Спасибо!


javascript html jointjs
person Kai Huang    schedule 18.07.2016    source источник
comment
Сделайте эту помощь: stackoverflow.com/questions/20286603/   -  person Devon_C_Miller    schedule 18.07.2016
comment
Я видел это. Но как применить к одному элементу, а не ко всей бумаге? Благодарность   -  person Kai Huang    schedule 18.07.2016
comment
Короче говоря, вы этого не сделаете. В документе представлены все обработчики событий. Это хорошая вещь. Вы можете добавить 500 узлов и по-прежнему иметь один обработчик. Вы можете получить свои собственные фигуры из форм JointJS с помощью .extend(). В обработчике событий на бумаге вы можете проверить тип ячейки и применить поведение, зависящее от типа. Для поведения, специфичного для экземпляра, вы все равно должны делать это в том же обработчике, но присоединять атрибуты к узлу, с которым может обращаться обработчик.   -  person Devon_C_Miller    schedule 19.07.2016

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете использовать событие pointerclick для захвата событий щелчка по элементам. view передается функции в качестве параметра, и вы можете получить модель представления через cellView.model.

paper.on('cell:pointerclick', function (cellView) {
   // your logic goes here
);
person Sajith Dilshan    schedule 21.07.2016

arrow_upward
3
arrow_downward

Способ сделать это с помощью классов и событий 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!');
});

Надеюсь, поможет !

person jsanchezs    schedule 22.07.2016

arrow_upward
1
arrow_downward

вам нужно слушать 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/

person vt.    schedule 19.07.2016