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?

Answer 1

you have to way:

1. 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")
       }
   }
   

   }

2. 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")
   
           }
       }
   }
   

   }