Get mouse events for a D3 element that is behind another? Picking priority?

Question

I'm making a D3 visualization where I want to draw a semitransparent box over a bunch of other clickable targets.

When the transparent thing is the only thing under the cursor, and the user clicks, I want to do one thing, but if any of the targets behind the box is under the cursor when the user clicks, I want to do a different thing.

I'd also, if possible, like mouseover to work; I want to be able to draw both the box itself and the targets differently depending on whether the cursor is currently inside them, with the cursor being able to be inside both the box and any of the targets at the same time.

What is the best way to achieve this in D3? Do I need to duplicate the box and have invisible/clickable and semitransparent/non-clickable versions behind and in front of the targets? Do I need to do my own picking logic in some parent coordinate space (and if so how do I intersect points with D3 objects)? Is there a handy D3 library for advanced or priority-based mouse picking that I ought to be using?

I've seen this answer that involves re-firing mouse events with an element temporarily set to pointer-events: none so they go through it, but I'm not sure that that gives me a way to tell whether any element behind me actually got the event, to make the box clickable in the area where it doesn't overlap with any targets.