CODEWITHSUNDEEP
javascriptdom-eventscytoscape.js
Simon Brunner
Simon Brunner

Reputation: 395

Cytoscape.js: add multiple event listeners to node

Using Cytoscape.js, I'd like to have a mouseover event associated with a node element, as well as a "click" event. The reason being that on a Desktop browser, mouseover is the more user friendly solution, but does not work on touch devices (where the click / tap event works best). I tried the following:

cy.nodes().qtip({
                content: function() {
                  return 'this.data('title') + '</b></a>' +
                      '<br><i>' + this.data('journal') +
                      '</i><br><i>' + this.data('pubDate') + '</i>' +
                      '<br>' + this.data('authors')
                },
                position: {
                  target: 'mouse',
                  adjust: {
                    mouse: false
                  }
                },
                style: {
                  classes: 'qtip-bootstrap',
                  tip: {
                    width: 16,
                    height: 8
                  }
                },
                show: {
                    event: 'mouseover',
                    event: 'click'
                },
                hide: {
                    event: 'mouseout',
                    event: 'click'
                }
             });

However, only the last-named listener (in this case "click") is active, whereas the mouseover does not work.

My question: can I add two listeners to a node? If so, how? If not, how can I achieve to have different events for the Desktop than for the touch device case?

Upvotes: 2

Views: 1053

Answers (2)

Simon Brunner
Simon Brunner

Reputation: 395

Actually I found an answer using the following two resources:

cy.nodes().qtip({
                content: function() {
                  return 'this.data('title') + '</b></a>' +
                      '<br><i>' + this.data('journal') +
                      '</i><br><i>' + this.data('pubDate') + '</i>' +
                      '<br>' + this.data('authors')
                },
                position: {
                  target: 'mouse',
                  adjust: {
                    mouse: false
                  }
                },
                style: {
                  classes: 'qtip-bootstrap',
                  tip: {
                    width: 16,
                    height: 8
                  }
                },
                show: {
                    event: 'mouseover tap'
                },
                hide: {
                    event: 'unfocus'
                }
             });

Basically multiple events can be defined by separating them with a space (as in the 'show' event) and hide can be done using 'unfocus' for both tap and mouseover.

Upvotes: 0

maxkfranz
maxkfranz

Reputation: 12242

That's invalid JSON. You can't have duplicate keys.

For { foo: 'bar', foo: 'baz' }, what value is foo? You can't have both, so the browser has to choose one --- the last one, I think.

You're using qtip APIs, not Cytoscape ones. Refer to the qtip docs: http://qtip2.com/options#show

You need to use space-delimited strings.

Upvotes: 0

Related Questions