UI clicks hitting game objects below

Question

I have a canvas with a panel with set width / height inside. The canvas rendermode is set to ScreenSpace Overlay.

My clicks on the panel are falling through and hitting the game objects below triggering their mouse events.

The little green circle is a Sprite with the following event

  public void OnMouseDown() {
        Debug.Log("click");
        Vector3 newPos = Camera.main.WorldToScreenPoint (this.transform.position);
        newPos.x -= panel.GetComponent<RectTransform>().rect.width / 2.0f;
        newPos.y -= panel.GetComponent<RectTransform>().rect.height / 2.0f;

        panel.transform.position = newPos;
  }

I've been reading through the docs but I'm missing something... How do I stop my clicks hitting the game objects below the panel?

Answer 1

You can try to use IsPointerOverGameObject to check if the mouse is over a UI element. Something like this:

public void OnMouseDown() {
        if (EventSystem.current.IsPointerOverGameObject()) return;

        Vector3 newPos = Camera.main.WorldToScreenPoint (this.transform.position);
        newPos.x -= panel.GetComponent<RectTransform>().rect.width / 2.0f;
        newPos.y -= panel.GetComponent<RectTransform>().rect.height / 2.0f;

        panel.transform.position = newPos;
  }

If you use IsPointerOverGameObject() without a parameter, it points to the "left mouse button" (pointerId = -1); therefore when you use IsPointerOverGameObject for touch, you should consider passing a pointerId to it. For example:

private static bool IsPointerOverGameObject()
{
    #if !UNITY_EDITOR && (UNITY_ANDROID || UNITY_IPHONE)
        const int fingerId = 0;
    #else
        const int fingerId = -1;
    #endif

    return EventSystem.current.IsPointerOverGameObject(fingerId);
}