防止 MouseArea 在子矩形内捕获点击

Question

我有一张全屏地图，我在上面添加了一个鼠标区域：

   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
         }
      }

偶尔会显示 infoPanel 矩形，在地图上覆盖一些信息，以及触发特定操作的按钮。

现在我已将鼠标区域添加到地图，以便在单击地图时隐藏信息面板，效果很好。

但是，当单击信息面板本身的矩形时，信息面板也会被关闭。

如何防止地图上的鼠标区域干扰 infoPanel 中的任何内容？

Answer 1

你必须这样：

您必须将信息面板的z值设置为map.z + 1并定义鼠标区域用于信息面板以捕获鼠标事件。像下面的代码

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

}

或者将您的鼠标区域移动到信息面板的上方

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

        }
    }
}

}

防止 MouseArea 在子矩形内捕获点击

Prevent MouseArea from catching clicks within child rect

qt

rectangles

touch-event

qml

mousearea