如何防止在extjs中双击时触发单击事件答案

【问题标题】：How to prevent firing single click event when double clicked in extjs如何防止在extjs中双击时触发单击事件
【发布时间】：2012-06-09 05:24:28
【问题描述】：

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

【问题讨论】：

标签： extjs event-handling extjs4.1 user-experience double-click

【解决方案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% 准确，在性能不同的系统上结果可能会有所不同

我不知道有什么更好的解决方案，而且我不鼓励您同时使用单击和双击，这通常会导致用户体验受损。

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案3】：

另一个想法是使用布尔值作为标志来控制发生的事情。

双击事件的相关顺序是：点击，双击，点击

您不能阻止第一次 Click 事件，但是通过在 Double Click 事件中设置布尔值 True，并在 Click 事件中对其进行测试，您可以阻止第二次 Click 运行，并可能弄乱 Double Click应该做的。

我有带有命令按钮的表单，我希望单击打开另一个表单，然后双击关闭它。示例代码：

Private flg As Boolean

Private Sub Button_Click()
  If flg Then
    flg = False
  Else
    ... code to open the form
  End If
End Sub

Private Sub Button_DblClick(Cancel As Integer)
  flg = True
  ... code to close the form
End Sub

【讨论】：