无法处理 QML 中的子矩形鼠标事件

Not able to handle child rect mouse events in QML

我有一个父矩形,它上面有一个子矩形,两个矩形都有鼠标事件,但子矩形不接受任何鼠标事件,父矩形始终在处理。

main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    visible: true
    width: 500
    height: 500
    title: qsTr("Hello World")
    Rectangle{
        id: outerrect
        color: "green"
        anchors.fill: parent
        Rectangle{
            id: innerrect
            width: 100
            height: 100
            color: "lightblue"
            anchors.centerIn: parent
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    console.log("child")
                }
            }
        }
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                console.log("parent")
            }
        }
    }
}

问题:

无法处理子矩形鼠标事件

查看 属性 propagateComposedEvents of MouseArea QML Type

的示例和解释

因此,如果您只想处理子矩形的点击,您可以更改父块中 MouseArea 块和子块 Rectangle 块的顺序。它改变了块处理事件的顺序。

要激活两个处理程序,顶部对象应该有 propagateComposedEvents: true 属性 并且 mouse.accepted = false 应该在 onClicked 处理程序中设置,例如:

    MouseArea{
        anchors.fill: parent
        propagateComposedEvents: true
        hoverEnabled: true
        onClicked: {
            mouse.accepted = false
            console.log("parent")
        }
    }