Button receiving clicked events even when behind a rectangle item and not visible in screen.

[Ashvit]

Simplified example

import QtQuick 2.12
import QtQuick.Controls 1.0
import QtQuick.Window 2.12


Window {
    id: window
    visible: true
    width: 100
    height: 100
    color: "Black"

    Rectangle{
        id:rect1
        z:100
        anchors.top: parent
        anchors.left: parent
        width: 45
        height: 35
        color:"red"
    }
    Rectangle{
        id:rect2
        color: "green"
        anchors.fill: parent
        Button{
            id:btn1
            anchors.left: parent.left
            text: "Button1"
            onClicked: {
                console.log("Button1 clicked");
            }
        }
    }
}

In the above example the red rectangle is above the part of a button, see z-axis, the problem I am facing is when I click the red rectangle in the overlapped portion where button is behind the rectangle, the button gets the click event(Log message "Button1 clicked").

I have the following requirements.

• I need to keep the button behind enabled, as the red rectangle is the result of a transition and it may move later based on user interaction.
• The portion inside the red rectangle can have multiple controls, so adding a mouse area inside the red rectangle and using propogateCompositeEvents through it wont work in my case.
• I don't want the button to receive any event when I click anywhere inside the red rectangle.

Is there any way I can achieve my requirements?

[fcarney]

Does this do what you want?

import QtQuick 2.12
import QtQuick.Controls 1.0
import QtQuick.Window 2.12


Window {
    id: window
    visible: true
    width: 100
    height: 100
    color: "Black"

    Rectangle{
        id:rect2
        color: "green"
        anchors.fill: parent
        Button{
            id:btn1
            anchors.left: parent.left
            text: "Button1"
            onClicked: {
                console.log("Button1 clicked");
            }
        }
    }

    MouseArea {
        id: eat_events_mousearea
        anchors.fill: rect1
    }

    Rectangle{
        id: rect1
        //z:100 // you can use creation order to control z
        anchors.top: parent
        anchors.left: parent
        width: 45
        height: 35
        color:"red"

        // all controls here take precedence over eat_events_mousearea, again using creation order to control z
    }
}

[Ashvit]

@fcarney Thankyou for the prompt reply, your solution does solve my problem.