Prevent MouseArea from catching clicks within child rect

Question

I have a fullscreen map, on which I added a mouse area:

   Map {
      id: map
      anchors.fill: parent
      plugin: osm
      zoomLevel: 16
      minimumZoomLevel: 13
      maximumZoomLevel: 20

      gesture.enabled: true

      Rectangle {
         id: infoPanel
         // ...

         Button {
            // ...
         }
      }

      MouseArea {
         anchors.fill: parent
         onPressed: {
               infoPanel.visible = false
         }
      }

The infoPanel rect will ocasionally be made visible, overlaying the map with some information, and a button to trigger a certain action.

Now I have added the mouse area to the map in order to hide the info panel whenever the map is clicked, which works fine.

However, the info panel is also dismissed when the rectangle of the info panel itself is clicked.

How can I prevent the mouse area from the map to interfere with anything which is inside infoPanel?

score 1 · Accepted Answer · answered Jul 18 '21 at 06:52

you have to way:

you must set z value of info panel to map.z + 1 and define mouse area for info panel to capture mouse event. like below code

Map {
    id: map
    anchors.fill: parent
    plugin: osm
    zoomLevel: 16
    minimumZoomLevel: 13
    maximumZoomLevel: 20
    gesture.enabled: true

Rectangle {
    id: infoPanel
    width: 100
    height: 100
    color: "red"
    z: map.z + 1

    MouseArea {
        anchors.fill: parent

        onClicked: {
            print("info panel")
        }
    }

    Button {
        width: parent.width / 2
        height: width
        anchors.centerIn: parent
        text: "button"

        onClicked: {
            print("button")
        }
    }
}

MouseArea {
    anchors.fill: parent

    onPressed: {
        infoPanel.visible = false
        print("map")
    }
}

}

or just move your mouse area to up of info panel

    Map {
    id: map
    anchors.fill: parent
    plugin: osm
    zoomLevel: 16
    minimumZoomLevel: 13
    maximumZoomLevel: 20
    gesture.enabled: true

MouseArea {
    anchors.fill: parent

    onPressed: {
        infoPanel.visible = false
        print("map")

    }
}

Rectangle {
    id: infoPanel
    width: 100
    height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent

        onClicked: {
            print("info panel")
        }
    }

    Button {
        width: parent.width / 2
        height: width
        anchors.centerIn: parent
        text: "button"


        onClicked: {
            print("button")

        }
    }
}

}

Thanks, solution 1 worked. I tried the same yesterday, but it didn't work because I put the `MouseArea` within the info panel after the `Button` in the QML, which made the button no longer work. I didn't know that the order of elements in QML mattered, so with the `MouseArea` first it now works. — user826955, Jul 18 '21 at 09:03

Prevent MouseArea from catching clicks within child rect

1 Answers1