Clicks go throught item, how to stop?



  • Hello could someone explain me how do i stop this beavior?

    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            id: bo1
            color: "blue"
            anchors.fill: parent
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("CLICKED")
                }
            }
        }
    
        Rectangle {
            id: bo2
            color: "green"
            anchors.fill: parent
            z: 1
            focus: true
    
            Rectangle {
                color: "red"
                id: removeButton
                anchors.centerIn: parent
                width: height
                height: 50
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        bo2.destroy()
                    }
                }
            }
        }
    }
    

    If i click on the green rectangle the mouse area in the blue rectangle respond to the click. I want to click on the green without the blue responding, thank you.


  • Moderators

    Hi! Just add another MouseArea to the green Item:

    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            id: bo1
            color: "blue"
            anchors.fill: parent
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("CLICKED")
                }
            }
        }
    
        Rectangle {
            id: bo2
            color: "green"
            anchors.fill: parent
            z: 1
            focus: true
    
            MouseArea {
                // THIS WILL CONSUME ALL CLICKS ON GREEN
                anchors.fill: parent
            }
    
            Rectangle {
                color: "red"
                id: removeButton
                anchors.centerIn: parent
                width: height
                height: 50
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        bo2.destroy()
                    }
                }
            }
        }
    }
    


  • Hello yes that could be 1 solution but i have an item on top of others which i need to interact with (clicks etc), so i wrote a javascript function, like, if the green rect is showing (which is a form for real), all the others items under it are disabled.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.