Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

MouseArea still clickable with a rectangle in its way



  • 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



  • @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 // <-
            }
    


  • @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



  • @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
    
          }
    


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


Log in to reply