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

Button receiving clicked events even when behind a rectangle item and not visible in screen.



  • Simplified example

    
    import QtQuick 2.12
    import QtQuick.Controls 1.0
    import QtQuick.Window 2.12
    
    
    Window {
        id: window
        visible: true
        width: 100
        height: 100
        color: "Black"
    
        Rectangle{
            id:rect1
            z:100
            anchors.top: parent
            anchors.left: parent
            width: 45
            height: 35
            color:"red"
        }
        Rectangle{
            id:rect2
            color: "green"
            anchors.fill: parent
            Button{
                id:btn1
                anchors.left: parent.left
                text: "Button1"
                onClicked: {
                    console.log("Button1 clicked");
                }
            }
        }
    }
    

    In the above example the red rectangle is above the part of a button, see z-axis, the problem I am facing is when I click the red rectangle in the overlapped portion where button is behind the rectangle, the button gets the click event(Log message "Button1 clicked").

    I have the following requirements.

    • I need to keep the button behind enabled, as the red rectangle is the result of a transition and it may move later based on user interaction.
    • The portion inside the red rectangle can have multiple controls, so adding a mouse area inside the red rectangle and using propogateCompositeEvents through it wont work in my case.
    • I don't want the button to receive any event when I click anywhere inside the red rectangle.

    Is there any way I can achieve my requirements?



  • Does this do what you want?

    import QtQuick 2.12
    import QtQuick.Controls 1.0
    import QtQuick.Window 2.12
    
    
    Window {
        id: window
        visible: true
        width: 100
        height: 100
        color: "Black"
    
        Rectangle{
            id:rect2
            color: "green"
            anchors.fill: parent
            Button{
                id:btn1
                anchors.left: parent.left
                text: "Button1"
                onClicked: {
                    console.log("Button1 clicked");
                }
            }
        }
    
        MouseArea {
            id: eat_events_mousearea
            anchors.fill: rect1
        }
    
        Rectangle{
            id: rect1
            //z:100 // you can use creation order to control z
            anchors.top: parent
            anchors.left: parent
            width: 45
            height: 35
            color:"red"
    
            // all controls here take precedence over eat_events_mousearea, again using creation order to control z
        }
    }
    


  • @fcarney Thankyou for the prompt reply, your solution does solve my problem.