How to handle pressed and released signals in overlapping Mousareas?

Question

I want to handle pressed and released signals in two overlapping Mouseareas.

Brief explanation of my case is as follows:

I have two mouse areas M1 and M2. M1 is contained by a rectangle, which serves as a button. It has a fixed size, e.g.100x100. M2 fills the whole screen and definitely larger in size than M1. I can set the z properties of M1 and M2 arbitrarily. I need to handle pressed and released signals in both of these Mouseareas.

Is it possible in QtQuick and if so, how?

import QtQuick 2.5
Item {
    visible: true
    width:1280
    height:720

    Rectangle {
        color: "blue"
        width: 100; height: 100
        z:1
        MouseArea {
            id:m1
            anchors.fill: parent
            onPressed : {
                mouse.accepted = false
                console.log("pressed m1")
            }
            onReleased: {
                console.log("released m1")
            }
        }
    }

    MouseArea {
        id: m2
        anchors.fill: parent
        onPressed : {
            console.log("pressed m2")
        }
        onReleased: {
            console.log("released m2")
        }
    }
}

I want to get pressed and released for both Mouseareas when m1 is pressed and released.

(Qt Version 5.5)

Answer 1

First of all, ids cannot begin with capital letters, so your MouseAreas can't be M1 and M2. Instead they have to be m1 and m2.

import QtQuick 2.3

Rectangle {
    id: root
    width: 400
    height: 300

    Rectangle {
        id: m1Container
        width: 100
        height: 100
        color: "blue"
        z: 1

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

            onPressed: {
                mouse.accepted = false
                console.log("m1 pressed")
            }
            onReleased: {
                console.log("m1 released")
            }
        }
    }

    MouseArea {
        id: m2
        anchors.fill: parent

        onPressed: {
            console.log("m2 pressed")
        }
        onReleased: {
            console.log("m2 released")
            if(m1.containsMouse) {
                m1.released(mouse)
            }
        }
    }
}

Edit: I have borrowed the idea of m1.released(mouse) from the answer by sk2212, and tweaked a little to handle the case when the mouse is outside of m1 and is pressed and released.

Answer 2

After the comments in first answer. What`s about something like this:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width:1280
    height:720

    Rectangle {
        color: "blue"
        width: 100; height: 100
        z:1
        MouseArea {
            id:m1
            anchors.fill: parent
            propagateComposedEvents: true
            onPressed : {
                mouse.accepted = false
                console.log("pressed m1")
            }
            onReleased: {
                console.log("released m1")

            }
        }
    }

    MouseArea {
        id: m2
        anchors.fill: parent
        onPressed : {
            console.log("pressed m2")
        }
        onReleased: {
            console.log("released m2")
            m1.released(mouse);
        }
    }
}

This prints out what you want.