Prevent MouseArea from catching clicks within child rect - qt

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:
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")
}
}
}
}