Mousedown vs. pointerdown on GoJS canvas

GoJS
1

I noticed that by default the GoJS canvas captures the mousedown event and does not let it pass to the element behind. But GoJS canvas allows the pointerdown event to pass through.

If you run the HTML below, when clicking on canvas, only “pointer down on body” is displayed in the console. But when you click below the canvas, both “pointer down on body” and “mouse down on body” are displayed.

I am wondering whether it is a bug or by design. I need a “global” event listener to detect user’s click event on the whole page with the GoJS canvas in it. And now I am using the pointerdown event handler. I just want to make sure that it is the correct approach.

Thanks for your time!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div
      id="myDiagramDiv"
      style="border: solid 1px black; width: 100%; height: 70%"
    ></div>
    <script src="../../release/go-debug.js"></script>
    <script>
      function init() {
        const $ = go.GraphObject.make;
        myDiagram = $(go.Diagram, "myDiagramDiv", {
          layout: $(go.LayeredDigraphLayout),
        });
        myDiagram.click = e => (e.diagram.lastInput.bubbles = true);
      }

      window.addEventListener("DOMContentLoaded", init);
      document.body.addEventListener("mousedown", () =>
        console.log("mouse down on body"),
      );
      document.body.addEventListener("pointerdown", () =>
        console.log("pointer down on body"),
      );
    </script>
  </body>
</html>
2

For version 2.2 we simplified our event handling by only registering “pointer…” event listeners instead of both “mouse…” and “touch…” listeners.

So I am guessing that what you are doing is OK.

3

Hi Walter, I downloaded the latest GoJS 2.2 and add my code there. Both “mouse down on body” and “pointer down on body” are displayed in the console when I clicked inside or outside GoJS canvas. Does it mean that 2.2 allows both the mousedown event and the pointdown event to pass through the canvas? But it is not consistent with your response. Maybe I misunderstood it.

4

Well, in v2.2 we are no longer registering “mouse…” listeners, so there’s no opportunity for us to handle them without bubbling them up.

5

Got it, Walter. Thanks for the explanation.