dart - 区分同一元素上的 onClick 和 onDoubleClick 以在 Dart 中执行不同的操作

Question

我想采取不明智的做法，将 onClick 和 onDoubleClick 都放在同一个元素上，每种类型的事件都会导致不同的操作。具体来说，在图像上，单击以前进到下一个图像，双击以切换全屏。

自然地，我会先点击两次然后双击(尽管我知道有些浏览器在双击之前只触发一次点击)。

我曾想过让自己轻松一点，将每个事件放入缓冲区(列表)——或者更确切地说，将 event.type 字符串添加到列表中，然后在经过适当的时间后，比如 250 或 300 毫秒检查缓冲区中的最后一项，如果双击则进入全屏，否则增加列表的长度。

我发现列表只有一个项目，我还没有想出如何让计时器工作..

我的尝试之一是:

void catchClickEvents(Event e) {
  var eventTypes = new List<String>();
  eventTypes.add(e.type);
  Duration duration = const Duration(milliseconds: 300);
  var timeout = new Timer(duration, () => processEvents(eventTypes));
}

void processEvents(List eTypes) {
  // just to see what is going on...
  print(eTypes);
}

这导致此输出打印到控制台:

[click]
[click]
[dblclick]

而不是

[click, click, dblclick]

如果我放慢速度，那么在这三种事件类型一起打印之前会有明显的延迟

所以...

更大的问题是“区分单击和双击并分别执行不同操作的大胆方法是什么？”

其他问题是:

我如何用连续的事件填充缓冲区(然后清除它)——甚至我如何使用 Dart 的事件流作为缓冲区...

检查缓冲区内容之前真正的超时方式是什么？

(我想最后一个问题是“我是否应该放弃努力并满足于一组带有字形图标的传统按钮？”!)

Answer 1

我不确定 IE 是否还有这里解释的事件序列(没有第二次点击事件) https://stackoverflow.com/a/5511527/217408

如果是，您可以使用稍微偏离的 Roberts 解决方案变体:

library app_element;

import 'dart:html' as dom;
import 'dart:async' as async;

Duration dblClickDelay = new Duration(milliseconds: 500);
async.Timer clickTimer;

void clickHandler(dom.MouseEvent e, [bool forReal = false]) {
  if(clickTimer == null) {
    clickTimer = new async.Timer(dblClickDelay, () {
      clickHandler(e, true);
      clickTimer = null;
    });
  } else if(forReal){
    print('click');
  }
}

void dblClickHandler(dom.MouseEvent e) {
  if(clickTimer != null) {
    clickTimer.cancel();
    clickTimer = null;
  }
  print('doubleClick');
}

void main() {
  dom.querySelector('button')
    ..onClick.listen(clickHandler)
    ..onDoubleClick.listen(dblClickHandler);
}

或者只是将 Roberts 解决方案与 mouseUp 事件一起使用，而不是 click 事件。