Saturday, July 7, 2018

Published 6:13 PM by with 0 comment

How Do You Make Plotly's Click And Double-Click Events Work Together?

There's an annoying issue in plotly. If you listen for both click and double-click events, the click events will be triggered on double clicks also. Is there a way to effectively have a 'single click' event?


Background

To see the issue, walk through the following examples...

First, a simple click event handler. Open this, and click on a marker on the plot. You should see a 'single click' alert.

Now, a simple double-click event handler. Open this, and double-click on a marker on the plot. You should see a 'double-click' alert.

Now for the problem...combine those two. Open this. This one implements both click and double-click. Click directly on a marker, then double-click directly on a marker. You'll see the 'single click' alert for both when it should be 'single click' for the click and 'double-click' for the double-click. It would be great if plotly had a 'single-click' event that solved this, but they don't as far as I know.


Solution

Basically, have click check for a double-click before calling its handler. Here is an example. Here is the meat of the code:


function singleClickHandler() {
  let t0 = Date.now();
  
  // make sure click isn't 2nd click in a double-click
  if ((t0 - doubleClickTime) > interval) {
    
    // wait enough time for double-click to make sure this isn't the first click in a double-click
    setTimeout(function() {
      if ((t0 - doubleClickTime) > interval) {
        alert('single click');
      }
    }, interval);
  }
}

For an explanation of the code, the basic algorithm is:
  • set an interval that represents a double-click (500 ms here)
  • on click event, check to see if this is the second click in a double-click (<500 ms since last click)
    • if not, check to see if this is the first click in a double-click
      • if not, handle single-click
      • if so, leave so double-click handler can handle it
    • if so, leave so double-click handler can handle it
  • in double-click handler, set the double-click event time so that the click handler knows when the double-click event last happened
This is a simple setTimeout use case, and that's it. This is a way around the plotly click/double-click annoyance in javascript.




, ,

      edit

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)