QML按下创建元素时如何让新元素立即响应鼠标事件

QML的鼠标事件分发规则是：一次按压动作触发的瞬间，就会锁定本次按压-移动-松开整个事件序列的接收MouseArea。你在原有红色块MouseArea的onPressed回调里才创建带MouseArea的蓝色块，这时候事件接收方已经确定为原来的MouseArea，后创建的MouseArea没赶上初始分发，自然收不到本次按压的后续事件，必须松开重新按压触发新一轮事件分发才能响应。

不需要重构交互逻辑，只要在新元素创建完成后，主动把当前鼠标事件的抓取权转移给新元素的MouseArea即可，核心用Qt提供的grabMouse()方法，操作步骤：

• 给两个MouseArea分别设置id，方便跨组件访问和控制状态
• 创建完新元素后，临时禁用原有红色块的MouseArea，避免事件冲突
• 调用新元素MouseArea的grabMouse()方法，强制接管当前正在进行的鼠标事件序列
• 在新MouseArea的松开事件里恢复原有MouseArea的启用状态，保证下次点击正常

修改后可直接运行的完整代码：

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        id: start

        width: 100
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        color: "red"

        Component
        {
            id: comp
            Rectangle
            {
                x: start.x
                y: start.y
                width: start.width
                height: start.height
                color: "blue"

                MouseArea
                {
                    id: newMouseArea
                    anchors.fill: parent

                    onPositionChanged:
                    {
                        console.log(mouse.x, mouse.y)
                        if (mouse.x < 0)
                        {
                            parent.x += mouse.x
                        }
                        if (mouse.y < 0)
                        {
                            parent.y += mouse.y
                        }
                        if (mouse.x > parent.width)
                        {
                            parent.x += mouse.x - parent.width
                        }
                        if (mouse.y > parent.height)
                        {
                            parent.y += mouse.y - parent.height
                        }
                    }

                    onReleased: {
                        // 鼠标松开后恢复原有红色块的交互能力
                        startMouseArea.enabled = true
                        // 不需要保留蓝色块的话打开下面这行即可
                        // parent.destroy()
                    }
                }
            }
        }

        MouseArea
        {
            id: startMouseArea
            anchors.fill: parent
            property Item obj

            onPressed: {
                obj = comp.createObject(start.parent);
                if (obj === null) {
                    console.log("Error creating object");
                    return
                }
                // 临时禁用当前MouseArea避免抢占事件
                startMouseArea.enabled = false
                // 强制新创建的MouseArea接管当前鼠标事件序列
                obj.newMouseArea.grabMouse()
            }
        }
    }
}

grabMouse()会无视鼠标当前位置直接接管所有未结束的鼠标事件，后续的位置变化、松开事件都会直接派发给调用该方法的MouseArea，完全满足按压创建后立刻响应拖拽的需求，不需要额外模拟按压事件。

内容的提问来源于stack exchange，提问作者serheo