MouseArea still clickable with a rectangle in its way

DavidM29

Hello,

I just found out that when I use a mouse area and I put an Item in front of it using z axis I can still click on the mouse area through the Item.

I would like to avoid this behaviour, how can I do that ?

Here is a sample code where I should be able to display the Yellow rectangle but I should not be able to hide it.

    Rectangle{
        width: parent.width/2
        height: parent.height/2
        color: "blue"
        anchors.centerIn: parent
        z:0
        MouseArea{
            anchors.fill: parent
            onClicked: isVisible=!isVisible
            z:0
        }
    }

    Rectangle{
        width: parent.width/1.2
        height: parent.height/1.2
        anchors.centerIn: parent
        z:10
        visible: isVisible
        color: "yellow"
    }

Thank you for your help in advance

ODБOï

@DavidM29 hi,
I have never tested the effect of z property with MouseArea ..

not sure this will really help you but

 MouseArea{
            anchors.fill: parent
            onClicked: isVisible=!isVisible
            z:0
            enabled: !isVisible // <-
        }

DavidM29

@LeLev
Thank you for your reply,

It should works with your example but I would like to avoid using this kind of solution because I'm having multiple "pop up" rectangles coming above some mouse area and I would like to avoid to set it like that :

enable: !window1.isVisible || !window2.isVisible || windowXX.isVisible ....

What I tried was this property but it does not seems to work for me

propagateComposedEvents: false

If you have any other ideas they are welcome

ODБOï

@DavidM29
other idea : add a MouseArea to the 2nd Rectangle :

    Rectangle{
        width: parent.width/1.2
        height: parent.height/1.2
        anchors.centerIn: parent
        z:10
        visible: isVisible
        color: "yellow"
        MouseArea{
            anchors.fill: parent
            
        }
    }

also see if QML Pupup type is suitable : https://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html

    Rectangle{
            width: parent.width/2
            height: parent.height/2
            color: "blue"
            anchors.centerIn: parent
            z:0
            MouseArea{
                anchors.fill: parent
                onClicked: popup.open()
                z:0
            }
        }

      Popup {
          id: popup
          width: parent.width/1.2
               height: parent.height/1.2
        x : 20
        y :20
          modal: true
          focus: true
          closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

      }

DavidM29

@LeLev
Thank you,
I will take the second idea. I believe there is no other good way to do that.