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

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.



  • 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