How can I verify that a clicked element is a GoJS picture part and not an overlaid element?

I'm trying to implement a mask over my GoJS diagram when a details sidepanel is shown. This requires stopping propagation of click events to diagram parts beneath. How can I verify that the event target is the picture part and not the mask element which overlays it?

I've tried using the pointer-events CSS property, but that doesn't do the job.

Simplified markup:

<div id="diagramWrapper"></div>
<div id="sidebar-mask"></div>

Script snippet:

buildGo(go.Picture, {
    source: 'images/icons/simplify-icon.png',
    ...,
    click: function (e, node) {
        if (e.diagram === node.part) { <-- this, right here, isn't right
            let nodesToRemove = getLinkedNodes(e, node.part.data.key);
            removeNodes(nodesToRemove);
        }
    }
})

I haven't gotten my head around the two-letter object properties that GoJS uses, which prevents me from easily finding the right property. Any insight into that would help greatly.

Solution

I suggest that you just set Diagram.isEnabled to false when you show a modal dialog. Be sure to set it back to true when the modal UI goes away for any reason. More possibilites are listed at https://gojs.net/latest/intro/permissions.html.

As documented at https://gojs.net/latest/intro/index.html#DevelopingYourDiagram, you should only be using documented API names in your code -- not the minified two character names which will change with each build.