2017-10-09 12 views
0

En utilisant Cytoscape.js, j'aimerais avoir un événement "mouseover" associé à un élément de noeud, ainsi qu'un événement "click". La raison en est que sur un navigateur Desktop, mouseover est la solution la plus conviviale, mais ne fonctionne pas sur les périphériques tactiles (où l'événement click/tap fonctionne le mieux). J'ai essayé les suivantes:Cytoscape.js: ajouter plusieurs écouteurs d'événement au noeud

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' 
 
       } 
 
      });

Cependant, seul l'auditeur dernier nommé (dans ce cas « clic ») est actif, alors que le passage de la souris ne fonctionne pas.

Ma question: puis-je ajouter deux écouteurs à un nœud? Si c'est le cas, comment? Si non, comment puis-je obtenir différents événements pour le bureau que pour le boîtier du périphérique tactile?

Répondre

0

C'est JSON invalide. Vous ne pouvez pas avoir de clés en double.

Pour { foo: 'bar', foo: 'baz' }, quelle est la valeur foo? Vous ne pouvez pas avoir les deux, alors le navigateur doit en choisir un --- le dernier, je pense. Vous utilisez des API qtip, pas celles de Cytoscape. Reportez-vous aux documents qtip: http://qtip2.com/options#show

Vous devez utiliser des chaînes délimitées par des espaces.

+0

Merci pour votre réponse, m'a aidé à réaliser mon erreur en définissant une valeur pour la même clé deux fois. Cependant, malheureusement, cela n'a pas résolu ma question. –

0

En fait, je trouve une réponse en utilisant les deux ressources suivantes:

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' 
 
       } 
 
      });

Fondamentalement mul Les événements tiple peuvent être définis en les séparant avec un espace (comme dans l'événement 'show') et hide peut être fait en utilisant 'unfocus' pour tapoter et passer la souris.