Overlapping mouseareas in QtQuick 2.0

Question

I have list of items in QML 2.0 and I want to display item's context menu (red box in the picture) only when mouse is inside black mouseArea. Context menu contains a few buttons, each of them has own museArea. In QtQuick 1.0 it works as expected, but in 2.0 not. When I move the cursor between small red boxed (context menu's items), black MouseArea::onExited is called (and context menu isn't shown). It looks like small red mouseareas covered the larger, black mousearea. If I set:

z: 10

in black mouseArea, onExited isn't called when cursor is above small red boxes, but I can't use small mouseares hovering effects. What should I do to have an access to small red boxes' mouseareas and simultanously not calling black mouseArea::onExited when cursor is above red box?

Answer 1

Instead of relying on the mouseArea onExited and onEntered events, you could enable hovering and check the containsMouse property. Here's a working example (QtQuick 2.0):

Column
{
    spacing: 10
    Repeater
    {
        model:4
        Rectangle
        {
            height: 100
            width: parent.width
            border.color: "black"

            MouseArea
            {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
            }

            Rectangle
            {
                visible: mouseArea.containsMouse
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.margins: 20
                width: 200
                border.color: "red"

                Rectangle
                {
                    anchors.centerIn: parent
                    color: "purple"
                    width: 20
                    height: 20
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked: print("clicked")
                    }
                }
            }



        }
    }
}

Answer 2

If a MouseArea overlaps with the area of other MouseArea items, you can choose to propagate clicked, doubleClicked and pressAndHold events to these other items by setting propagateComposedEvents to true and rejecting events that should be propagated. See the propagateComposedEvents documentation for details.

Source