Catch pointer events by multiple gameObjects

Use the layers.

You can set the blocking mask directly on your canvas.

UPDATE:

FOUND THE SOLUTION

You need to have your 2 Canvas set to Screen Space Camera and affect the same Camera to the canvas

What you are looking for is Physics.RaycastAll. This returns all hits along the ray instead of the first one. Of course this means it returns an array of RaycastHits which you will need to loop through.

Here is an example of use. Hopefully this helps in allowing for you to have overlapping objects and multiple events:

 void SendEvents()
 {
      Ray ray = rayFromMouse; //the ray you are making
      RaycastHit[] hits; //the array of hits. 
 
      hits = Physics.RaycastAll(rayFromMouse);
 
      if(hits.Length > 0)
      {
           for(int i = 0; i < hits.Length; i++)
           {
                hits[i].transform.GetComponent<MyEventScript>().CallEvent();
           }
      }
 }

This is how I solved passing on any PointerEvent type to the next Raycast-blocking item underneath. It's easy to implement some check for a specific Tag, Component etc. if you have many blocking objects stacked...

 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.UI;
 using UnityEngine.EventSystems;
 
 public class PassOnPointerEvent : MonoBehaviour, IPointerDownHandler, IDragHandler, IBeginDragHandler, IPointerUpHandler, IEndDragHandler
 {
     GameObject newTarget;
 
     public void OnPointerDown(PointerEventData eventData)
     {
         List<RaycastResult> raycastResults = new List<RaycastResult>();
         EventSystem.current.RaycastAll(eventData, raycastResults);
         newTarget = raycastResults[1].gameObject; //Array item 1 should be the one next underneath, handy to implement for-loop with check here if necessary.
         print($"Passing on click to {newTarget}"); //Just make sure you caught the right object
 
         ExecuteEvents.Execute(newTarget, eventData, ExecuteEvents.pointerDownHandler);
     }
 
     public void OnPointerUp(PointerEventData eventData)
     {
         ExecuteEvents.Execute(newTarget, eventData, ExecuteEvents.pointerUpHandler);
     }
 
     public void OnBeginDrag(PointerEventData eventData)
     {
         ExecuteEvents.Execute(newTarget, eventData, ExecuteEvents.beginDragHandler);
     }
 
     public void OnDrag(PointerEventData eventData)
     {
         ExecuteEvents.Execute(newTarget, eventData, ExecuteEvents.dragHandler);
     }
 
     public void OnEndDrag(PointerEventData eventData)
     {
         ExecuteEvents.Execute(newTarget, eventData, ExecuteEvents.endDragHandler);
     }  
 }

Hope it can help someone!

It seems like you're trying to do some sort of event bubbling in a sense.

What you can do, since the front panel is a child of the back panel, is calling the same method in back panel that is called OnPointerEnter by it's EventTrigger in the front panel's EventTrigger as well.

In other words, you would make the child intercept the event and send it to it's parent inside your own callback (whatever public void method you give to the EventTrigger for this).

Hope it works!

If someone will read this.. I found solution for me.

In my case the event is fired for first layer, then to parent layers, but I need only the first event (for top object), so its easy to filter events by frame number:

 private int frameNum;
 public void OnPointerEnter(PointerEventData eventData)//OnPointerEnter, but you can use any other events
 {
       if (frameNum == Time.frameCount) return;
     frameNum = Time.frameCount;

     //Do your stuff here
 }

Only the first event will pass (for toppest object).