Question

使用Cytoscape.js，我希望有一个＆＃34; mouseover＆＃34;与节点元素相关联的事件，以及＆＃34; click＆＃34;事件。原因是在桌面浏览器上，鼠标悬停是更加用户友好的解决方案，但不适用于触摸设备（点击/点击事件效果最佳）。我尝试了以下方法：

＆＃13;

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

＆＃13;

但是，只有最后命名的侦听器（在这种情况下为＆＃34;单击＆＃34;）处于活动状态，而鼠标悬停不起作用。

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

Answer 1

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

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

您使用的是qtip API，而不是Cytoscape API。请参阅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'
                }
             });

基本上可以通过用空格分隔多个事件来定义多个事件（如'show'事件中那样），并且可以使用'unfocus'进行隐藏和鼠标悬停。

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

2 个答案: