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.
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:
For an explanation of the code, the basic algorithm is:
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.
0 comments:
Post a Comment