嵌套MouseArea悬停

Question

我遇到了嵌套MouseArea的问题。当我单击红色Rectangle时，它会在Rectangle顶部触发exited事件(至少对我来说是这样)。这是故意的行为吗？如果是的话，有解决办法吗？

编辑

澄清

我想要的是能够在单击子Rectangle时保持顶部Rectangle的悬停(顶部Rectangle应该保持blue)。这是有用的，如果我想隐藏和取消隐藏按钮等悬停，这是web接口(HTML/CSS)中的常见做法。现在这样做会产生奇怪的效果，因为单击entered信号显示的按钮将在单击它们时消失。

编辑

我用想要的行为做了一个Javascript演示：https://jsfiddle.net/uo4vousu/，即使您单击红色的矩形，父框仍然是蓝色的，这就是我想要的。在QML示例中，父级变为绿色。我更新了QML代码以处理jsfiddle。

编辑

这可能是linux唯一的问题。

下面是一个例子：

Rectangle {
    id: top
    width: 100
    height: 32
    anchors.centerIn: parent
    color: "green"

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onExited: top.color = "green"
        onEntered: top.color = "blue"

        Rectangle {
            id: child
            width: 16
            height: 16
            anchors.centerIn: parent
            color: "red"
            MouseArea {
                anchors.fill: parent
                onPressed: child.color="gray"
                onReleased: child.color="red"
            }
        }
    }
}

Answer 1

我发现这个问题只有在使用可怕的窗口管理器时才会出现。我不知道是什么原因造成的，但我认为这件事目前已经解决了。

Answer 2

简单的方法：

Rectangle {
    id: top
    width: 100
    height: 32
    anchors.centerIn: parent
    color: "green"
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onExited: top.color = "green"
        onEntered: top.color = "blue"
        Rectangle {
            width: 16
            height: 16
            anchors.centerIn: parent
            color: "red"
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onExited: top.color = "blue"
                onEntered: top.color = "green"
                onClicked: console.log("Clicked")
            }
        }
    }
}

你可以用一些数学，

Rectangle {
    id: top
    width: 100
    height: 32
    anchors.centerIn: parent
    signal sgnEnteredZone()
    color: "green"
    onSgnEnteredZone:  {
        top.color = "blue"
    }
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onMouseXChanged:{

            if( (mouseX <inRect.x ||mouseX>inRect.width + inRect.x )
                    && (mouseY <inRect.y ||mouseY>inRect.height + inRect.y)
                    )
                sgnEnteredZone()
            else
                top.color = "green"

        }
        onMouseYChanged:{
            if( (mouseX <inRect.x ||mouseX>inRect.width + inRect.x )
                    && (mouseY <inRect.y ||mouseY>inRect.height + inRect.y)
                    )
                sgnEnteredZone()
            else
                top.color = "green"
        }


        Rectangle {
            id:inRect
            width: 16
            height: 16
            anchors.centerIn: parent
            color: "red"
            MouseArea {
                anchors.fill: parent
                onClicked: console.log("Clicked")
            }
        }
    }
}