Clicks go throught item, how to stop?

zizzu

Hello could someone explain me how do i stop this beavior?

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: bo1
        color: "blue"
        anchors.fill: parent

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("CLICKED")
            }
        }
    }

    Rectangle {
        id: bo2
        color: "green"
        anchors.fill: parent
        z: 1
        focus: true

        Rectangle {
            color: "red"
            id: removeButton
            anchors.centerIn: parent
            width: height
            height: 50
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    bo2.destroy()
                }
            }
        }
    }
}

If i click on the green rectangle the mouse area in the blue rectangle respond to the click. I want to click on the green without the blue responding, thank you.

? Offline

Hi! Just add another MouseArea to the green Item:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: bo1
        color: "blue"
        anchors.fill: parent

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("CLICKED")
            }
        }
    }

    Rectangle {
        id: bo2
        color: "green"
        anchors.fill: parent
        z: 1
        focus: true

        MouseArea {
            // THIS WILL CONSUME ALL CLICKS ON GREEN
            anchors.fill: parent
        }

        Rectangle {
            color: "red"
            id: removeButton
            anchors.centerIn: parent
            width: height
            height: 50
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    bo2.destroy()
                }
            }
        }
    }
}

zizzu

Hello yes that could be 1 solution but i have an item on top of others which i need to interact with (clicks etc), so i wrote a javascript function, like, if the green rect is showing (which is a form for real), all the others items under it are disabled.