Distinguish between onClick and onDoubleClick on same element to perform different actions in Dart

Question

I want to do the ill-advised and place both an onClick and onDoubleClick on the same element with each type of event resulting in a different action. Specifically on an image, click to advance to the next image, double-click to toggle fullscreen.

Naturally I get two clicks followed by a double-click (though I understand that some browsers only fire one click before the double-click).

I had thought to make it easy on myself and place each event into a buffer (List) - or rather to add the event.type string to a list, then, after a suitable elapse of time, say 250 or 300 milliseconds examine the last item in the buffer and if doubleclick then go fullscreen else advance the length of the list.

I have found that the list only ever has one item, and I have not worked out how to get the timer to work..

Amongst my attempts was this one:

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);
}

this results in this output printed to the console:

[click]
[click]
[dblclick]

rather than

[click, click, dblclick]

If I slow it down there is a clear delay before those three event types are printed together

So...

The bigger question is 'What is the darty way to distiguish between single and double-click and perform a different action for each?'

The other questions are:

How do I fill a buffer with successive events (and later clear it down) - or even how do I use Dart's Stream of events as a buffer...

What is the real way timeout before examining the contents of the buffer?

(and I guess the final question is 'should I abandon the effort and settle for a conventional set of buttons with glyph-icons?'!)

Answer 1

I'm not sure if IE still has the event sequence explained here (no 2nd click event) https://stackoverflow.com/a/5511527/217408

If yes you can use a slightly deviated variant of Roberts solution:

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);
}

or just use Roberts solution with the mouseUp event instead of the click event.

Answer 2

The problem is that your variable is not global.

var eventTypes = new List<String>();

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

void processEvents(List eTypes) {
  print(eTypes);
}

There also is e.detail that should return the number of the click. You can use that, if you don't need the Internet Explorer. The problem with your list is that it grows and never gets cleared.

Let's take into account what we know: You get click events and at somepoint you have doubleclicks.

You could use a click counter here. (Or use e.detail) to skip the second click event. So you only have click and dblclick.

Now when you get a click event, you create a new timer like you did before and run the click action. If you get the dblclick event you simply run you action. This could like this:

DivElement div = querySelector('#div');
Timer timeout = null;
div.onClick.listen((MouseEvent e) {
  if(e.detail >= 2) {
    e.preventDefault();
  } else {
    if(timeout != null) {
      timeout.cancel();
    }

    timeout = new Timer(new Duration(milliseconds: 150), () => print('click'));
  }
});

div.onDoubleClick.listen((MouseEvent e) {
  if(timeout != null) {
    timeout.cancel();
    timeout = null;
  }
  print('dblclick');
});

This is the example code that works for me. If you can't rely on e.detail just us a counter and reset it after some ms after a click event.

I hope this helps you.

Regards, Robert