Overlapping Mouse Areas

[piplex]

Hello all,

MouseArea of blueRectangle is disabled.
When blueRectangle is clicked , yellowRectangle receives onClicked. Why is this happening ?
How can I do when MouseArea of blueRectangle is disabled and I clicked on this the yellowRectangle does not receives onClicked.

Rectangle {
    id: yellowRectangle
    color: "yellow"
    width: 100; height: 100
 
    MouseArea {
        anchors.fill: parent
        onClicked: console.log("clicked yellow")
    }
 
    Rectangle {
        id: blueRectangle
        color: "blue"
        width: 50; height: 50
 
        MouseArea {
            anchors.fill: parent
            enabled: false
            onClicked: {
                console.log("clicked blue")
                mouse.accepted = false
            }
        }
    }
}

Rectangle {
    id: yellowRectangle
    color: "yellow"
    width: 100; height: 100

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

    Rectangle {
        id: blueRectangle
        color: "blue"
        width: 50; height: 50

        MouseArea {
            anchors.fill: parent
            enabled: false
            onClicked: {
                console.log("clicked blue")
                mouse.accepted = false
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Hello all,

MouseArea of blueRectangle is disabled.
When blueRectangle is clicked , yellowRectangle receives onClicked. Why is this happening ?

That's because the other mouse area is disabled.

How can I do when MouseArea of blueRectangle is disabled and I clicked on this the yellowRectangle does not receives onClicked.

Don't disable the mouse area, just don't act on its event.