我有个问题。是否有可能将双击鼠标事件绑定到节点?
在文档中,只有“点击”。
谢谢你的帮助!
您可以doubleTap
像这样为 Cytoscape 添加自定义事件:
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 的观点,这不是移动友好的解决方案。
cy.js 的核心要求之一是它应该在不同设备上运行得一样好并且尽可能一致。双击是 PC 时代的遗留物:它通常会导致用户界面不佳,并且对于基于触摸的设备来说完全陌生。因此,我们目前不支持它。-M
还有一种方法可以在没有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) {
...
});
感谢@fracz 的解决方案。就我而言,我需要点击位置。如果需要来自原始点击事件的元数据,请不要忘记传递和替换事件,因为双击事件不包含所有元数据。
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(食指,使用此事件位置)+tap(中指,位置无关仅作为选择确认)的组合进行实验?那行得通吗?
请参阅fixpoint/cytoscape-dblclick ( MIT 许可证)以获取可供使用的第 3方解决方案。
这不是严格的双击,但可以像这样工作。它依赖于node.selected()
当用户在节点上点击/单击一次时,它会获得一个 state 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>