Are overlapping buttons via EventSystem possible?

I’m having trouble implementing something that should be very simple. I have two buttons on separate canvases with different sort orders: BaseCanvas, and OverlayCanvas. The buttons overlap, where the OverlayCanvasButton lies on top of the BaseCanvasButton, like so:

alt text

When I click the red area, the OverlayCanvasButton’s OnClick() is registered.

When I click the blue area, the BaseCanvasButton’s OnClick() is registered.

When I click the green area, only the OverlayCanvasButton’s OnClick() is registered; however, that is not the desired functionality. When I click the green area, I want both button’s OnClick() to register.

I have tried putting the canvas’ on separate layers, and adjusting the ‘BlockingMask’ properties of their Graphic Raycasters accordingly, but that doesn’t appear to do anything. If I put the OverlayCanvasButton in a CanvasGroup and turn off Block Raycasts, then the raycast will pass through and hit the BaseCanvasButton, but it won’t register with the OverlayCanvasButton.

In short, is it even possible for the EventSystem to handle both the events for a GUI component and handle events for a component underneath it on a separate canvas? It seems like this is what the BlockingMask property should be used for, but again, no matter what configuration of masks I use, it doesn’t appear to do anything.

I should note that in my actual use case for my game, the OverlayCanvasButton is not a button, but an Image with a script attached that implements IPointerClick and follows the mouse cursor, and the BaseCanvasButton is a scroll rect that I am trying to scroll. The scroll functionality doesn’t happen whilst the image with the clickable functionality sits on top of it. I want both to be able to execute via the EventSystem.

I don’t think this is possible by default, because the event system sends the event to the topmost layer (the one with the higher sorting order), and within the same canvas to the latest sibling in the hierarchy tree.

What you could do is to create a custom script that detects when you click on overlapping areas (you could reference all the objects that you think will overlap) and if it really overlaps, call the other object as well.