MouseArea disabled if item on top

[DeltaSim]

Hello,

I have a question regarding MouseArea and other items.
Is it possible to disable MouseArea if something is on top of it ?
For example:

Item{
   id: mainItem
   height: 400
   width: 800
   MouseArea{
      anchors.fil: parent
      onClicked: console.log("Hello !")
   }
   Rectangle{
      z: 2
      anchors.fill: parent
      color: "blue"
   }
}

In this example, the rectangle is on top of the mouseArea so I would like to disable mouseArea events, is it possible ?

Thank you

[J.Hilk]

@DeltaSim certainly

but there are many ways to do this.

The easiest, that comes to my mind right now is, simply give your rectangle an mouseArea of its own, that will capture the events (by default) and not pass it on to the mouseArea underneath

[jeremy_k]

@J-Hilk's method is the best I know of for completely declarative syntax simplicity.

Here's a partially imperative solution using Item.childAt():

Rectangle {
    MouseArea {
        anchors.fill: parent
        onClicked: parent.childAt(mouseX, mouseY) === this ?
            console.log("not covered") :
            console.log("covered") 
    }
    Rectangle {
        width: parent.width / 2
        height: width
        color: "blue"
    }
}

[DeltaSim]

Thanks for your feedbacks @J-Hilk and @jeremy_k .
Your solutions seem good, I will pick on of the two.