Cytoscape.js：将多个事件侦听器添加到节点

Question

使用Cytoscape.js，我想要一个与节点元素关联的“鼠标悬停”事件以及一个“点击”事件。原因是在桌面浏览器中，mouseover是更友好的用户解决方案，但在触摸设备上无法使用（click/tap事件效果最佳）。我试过如下：

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

不过，只有最后命名监听器（在这种情况下，“点击”）是活跃的，而鼠标悬停不起作用。

我的问题：我可以添加两个侦听器到一个节点？如果是这样，怎么样？如果没有，我怎么能够实现桌面的不同事件比触摸设备的情况？

Answer 1

这是无效的JSON。您不能有重复的密钥。

对于{ foo: 'bar', foo: 'baz' }，什么值foo？你不能同时拥有两个，所以浏览器必须选择一个---我认为最后一个。

您使用的是qtip API，而不是Cytoscape。请参阅qtip文档：http://qtip2.com/options#show

您需要使用空格分隔的字符串。

Answer 2

其实我找到了答案使用以下两种资源：

• http://qtip2.com/options#show（从@maxkfranz的答案）
• http://craigsworks.com/projects/forums/showthread.php?tid=1896

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

基本上MUL tiple事件可以通过将它们与空间分开来定义（如'show'事件中），hide可以使用'unfocus'来完成tap和mouseover。