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。