Question

我有一个问题。是否有可能将双击鼠标事件绑定到节点？
在文档中，只有“点击”。

感谢您的帮助！

Answer 1

您可以为Cytoscape添加自定义doubleTap事件，如下所示：

var cy = $('#cy').cytoscape('get');
var tappedBefore;
var tappedTimeout;
cy.on('tap', function(event) {
  var tappedNow = event.cyTarget;
  if (tappedTimeout && tappedBefore) {
    clearTimeout(tappedTimeout);
  }
  if(tappedBefore === tappedNow) {
    tappedNow.trigger('doubleTap');
    tappedBefore = null;
  } else {
    tappedTimeout = setTimeout(function(){ tappedBefore = null; }, 300);
    tappedBefore = tappedNow;
  }
});

然后，您可以订阅新活动。例如，如果需要检测节点上的双选项卡，请执行以下操作：

cy.on('doubleTap', 'node', function(event) { /* ... */ });

尽管如此，我理解@maxkfranz的观点，认为这不是适合移动设备的解决方案。

Answer 2

cy.js的核心要求之一是它应该在各种设备上尽可能一致地工作。双击是PC天的延续：它经常导致UI不佳，并且对于基于触摸的设备来说是完全陌生的。因此，我们目前不支持它。 -M

Answer 3

还有一种方法可以在没有setTimeout的情况下实现这一目标。事件具有timeStamp属性，当事件被触发时，其值为UNIX时间戳。所以，这是方法：

var doubleClickDelayMs = 350;
var previousTapStamp;

cy.on('tap', function(e) {
    var currentTapStamp = e.timeStamp;
    var msFromLastTap = currentTapStamp - previousTapStamp;

    if (msFromLastTap < doubleClickDelayMs) {
        e.target.trigger('doubleTap', e);
    }
    previousTapStamp = currentTapStamp;
});


cy.on('doubleTap', function(event, originalTapEvent) {
    ...
});

这是一个工作小提琴：https://jsfiddle.net/scebotari66/84x7hxd0/4/

Answer 4

感谢@fracz的解决方案。在我的情况下，我需要点击位置。如果需要原始点击事件中的元数据，请不要忘记传递和替换事件，因为doubletap事件不包含所有元数据。

var tappedBefore;
var tappedTimeout;

cy.on('tap', function(event) {
  var tappedNow = event.target;
  if (tappedTimeout && tappedBefore) {
    clearTimeout(tappedTimeout);
  }
  if(tappedBefore === tappedNow) {
    tappedNow.trigger('doubleTap', event);
    tappedBefore = null;
    originalTapEvent = null;
  } else {
    tappedTimeout = setTimeout(function(){ tappedBefore = null; }, 300);
    tappedBefore = tappedNow;
  }
});

并使用它：

cy.on('doubleTap', function (event, originalTapEvent) {
    event = originalTapEvent;
...

此外，是否有人使用tapstart（食指，使用此事件位置）+点击（中指，位置无关，仅作为选择确认）作为替代方案进行实验？那会有用吗？

Answer 5

这不是严格的双击，但可以正常工作。它依靠node.selected()

当用户在节点上点击/单击一次时，其状态为selected。当用户再次单击并选择节点之前，将其双击。

此解决方案无需跟踪其他状态并使用超时。

cy.on('tap', 'node', function(evt){
  let node = evt.target;
  console.log('tapped ' + node.id());
  if (node.selected()) {
    console.log('selected ' + node.id());
  }
});

控制台日志将成为

tapped <nodeId>
tapped <nodeId>
selected <nodeId>

Answer 6

请参阅 fixpoint/cytoscape-dblclick（MIT 许可证）以获取可供使用的第 3^rd 方解决方案。

Cytoscape.js检查双击节点

6 个答案: