如何在extjs中双击时防止单击事件发生

Question

我有一个树型面板，每个节点都有单击和双击事件。但是当我双击它时也会触发单击事件。那么双击时如何防止单击事件触发？

Answer 1

一般使用都单击和双击事件被认为是一种不好的做法，并且非常沮丧。

但是，如果您仍想这样做，唯一能够区分单击和双击的方法是通过测量点击之间的时间来人为添加此区分。

这个想法是，你不要立即做你的单击动作，而是等待第二次点击。如果第二次点击很快出现，那么您的双击动作就会被触发。否则，您的单击操作会在延迟后触发。

你的代码看起来是这样的：

var singleClickTask = new Ext.util.DelayedTask(singleClickAction), // our delayed task for single click 
    singleClickDelay = 100; // delay in milliseconds 

function onClick() { 
    singleClickTask.delay(singleClickDelay); 
} 

function onDblClick() { 
    // double click detected - trigger double click action 
    doubleClickAction(); 
    // and don't forget to cancel single click task! 
    singleClickTask.cancel(); 
} 

function singleClickAction() { 
    // something useful... 
} 

function doubleClickAction() { 
    // something useful... 
} 


// setting event handlers on an Element 
elem.on('click', onClick); 
elem.on('dblclick', onDblClick); 

最明显的缺点是：

• 没有为一个单一的点击动作
• 在不同的操作系统的延迟可以有不同的设置对于触发双击的点击之间的时间间隔，如此硬编码的singleClickDelay并不可靠
• JavaScript计时器不是100％准确的而结果可能与不同的性能

系统不同，我不知道有什么更好的解决方案，并再次，我鼓励你在同一时间使用单，双点击，这通常会导致一个破碎的用户体验。

Answer 2

我认为最好在第一次点击事件而不是第二次事件上执行操作。你可以通过设置一个布尔值来检查每个点击事件。

该代码证实的方法

onGridRowClick: function(view, record, item, index, e, eOpts) { 
    if (record._task_in_progress) { 
     return; 
    } 
    // Let the second click as part of the double click to be ignored 
    record._task_in_progress = true; 

    // Emulating async task here 
    setTimeout(function() { 
     record._task_in_progress = false; 
    }, 1000); 
}