MouseArea 事件传播到其父级兄弟。为什么?

MouseArea event is propagated to its parent sibling. Why?

这是代码的当前形式的代码片段

Rectangle
{
    id: menu
    GridLayout
    {
        id: layout
        columns: 4
        rows: 3

        Repeater
        {
            model: ListModel {}
            ToolButton {}
        }
        Rectangle
        {
        x: -3
        y: -33
        width: menu.width - 2
        height: menu.height + 33
        border.color: "red"
        border.width: 3
        color: "blue"
        MouseArea
        {
            x: mapToItem(menu, -5, -35).x
            y: mapToItem(menu, -5, -35).y
            width: menu.width
            height: menu.height + 35
            hoverEnabled: true
            preventStealing: true
            onEntered:console.log("onEntered")
            onExited:console.log("onExited menu mous area")
        }
        }
    }
}

MouseArea 悬停事件向下传播到 layout 中的 ToolButtons。我不明白为什么。因此,onEnteredonExited 事件不会按预期工作,因为 onExited 发生在 MouseArea 内部,而 ToolButtons'hovered' 并显示工具提示。最后我需要 MouseArea 比它的父级 Rectangle 更宽和更长,这样一旦 onExited 被发出,menu 就会变得不可见。 Rectangle 测试成功后,将 C++ 类型设为 Polygon 是有意义的。

在您的示例中,onExited 必须在输入 ToolButton 时发出。根据 MouseArea.exited():

Rectangle {
    width: 400; height: 400
    MouseArea {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true
    }
    MouseArea {
        id: mouseArea2
        width: 100; height: 100
        anchors.centerIn: parent
        hoverEnabled: true
    }
}

Moving the mouse into mouseArea2 from mouseArea1 will cause mouseArea1 to emit the exited signal.

如果您不想发出 exited 信号,

If instead you give the two MouseAreas a parent-child relationship, moving the mouse into mouseArea2 from mouseArea1 will not cause mouseArea1 to emit exited. Instead, they will both be considered to be simultaneously hovered.

也就是说,将 ToolButton(以及所有相关组件)放在 MouseArea 中。例如,

Rectangle {
    id: menu

    Rectangle {
        //some properties
        MouseArea {
            hoverEnabled: true
            //some properties

            onEntered:console.log("onEntered")
            onExited:console.log("onExited menu mous area")

            GridLayout {
                id: layout
                Repeater {
                    ToolButton {}
                }
            }
        }
    }
}