Node single click interrupts double click

GoJS
1

My application requires that a user can single click and double click on a single node. Each click type provides different functionality. When I double click on the node both functions (single and double) are executed. When doubling clicking on a node I want only doubleClick function to execute. Any suggestions please?

Here’s the snippet.

    $(gojs.Node, 'Spot',
      {
        click: function(e, obj) {
           console.log("Single Click");
        }
        doubleClick(e,obj) {
           console.log("Double Click");
        }
      },
2

What you are asking for is impossible as long as you want single click events to happen promptly, rather than waiting until a double click might have happened and then deciding to raise the event.

But that reasoning also tells you the solution to your problem: have your click event handler wait until a double click has not happened before deciding to proceed.

3

Here’s an example:

    var myLastClick = 0;
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          click: function(e, node) {
            if (e.clickCount === 1) {
              var time = e.timestamp;
              myLastClick = time;
              setTimeout(function() {
                if (myLastClick === time) {
                  console.log("click " + myLastClick);
                }
              }, 500);
            }
          },
          doubleClick: function(e, node) {
            myLastClick = e.timestamp;
            console.log("DOUBLE " + myLastClick);
          },
        },
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

You might also want to think about triple or quadruple clicks, about other button clicks, and about other modified clicks; I didn’t in the code above.

I also assumed that the double-click decision time is 500 milliseconds. That should be parameterized somehow.

4

But after 500 ms OR whatever milliseconds it is still triggers code inside setTimeout in click event.

I am facing same issue as reported.
Please help me.

5

Could you please explain how the above explanation and code are insufficient for you?

6

Please check above code pen example which contains GoJs basic example. In this please double click Alpha node OR any other node. It will trigger double click event first and then after 500 milliseconds it will trigger code inside setTimeout .

7

Your code is missing setting myLastClick = e.timestamp in your doubleClick event handler. That is required in order for the click event handler to recognize that a doubleClick happened since the click event.

8

Yes after adding that it is working as expected, thank you so much @walter for your quick responce.