How to make double MouseArea take effect?

Question

Here is my QML code :

Rectangle
{
    .....
    Rectangle
    {
        ....height and width is smaller than parent
        MouseArea
        {
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:
            {
                console.log("enter 2")
            }
        }
    }


    MouseArea
    {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true

        onEntered:
        {
            console.log("enter 1")
        }
    }
}

Only mouseArea1 takes effect. If I remove mouseArea1 then mouseArea2 takes effect. So I think the mouse event must be handled by mouseArea1 and let it couldn't be passed to mouseArea2.

I search the document to find out which attr can prevent such behavior but nothing found. So how to let the mouseArea1 and mouseArea2 take effect at the same time?

Answer 1

For "composed" mouse events -- clicked, doubleClicked and pressAndHold -- you can achieve this using the propagateComposedEvents property. But that won't work here because hover events are not composed events.

So what you need to do instead is to change the order in which the MouseAreas are evaluated.

One simple trick is to swap the order of the two MouseAreas in the QML source itself. By placing the smaller one after the larger one, the smaller one takes precedence:

Rectangle{
    //.....
    MouseArea{
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true

        onEntered:{
            console.log("enter 1")
        }
    }

    Rectangle{
         //....height and width is smaller than parent
        MouseArea{
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:{
                console.log("enter 2")
            }
        }
    }
}

A second method that achieves the same thing is to add a z index to the topmost MouseArea that's greater than the lower one. By default every element has a z index of 0, so just adding z: 1 to the smaller MouseArea will do the trick:

Rectangle{
    //.....
    Rectangle{
        //....height and width is smaller than parent
        MouseArea{
            z: 1              // <-----------------
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:{
                console.log("enter 2")
            }
        }
    }

    MouseArea{
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true

        onEntered:{
            console.log("enter 1")
        }
    }
}