title: Can't click button below a MouseArea
body: <p>Here I have a rectangle that is the parent and a child rectangle. The child rectangle has a <code>MouseArea</code> that allows you to swipe the child rectangle. Now, I want to have a button on the parent rectangle (under the child rectangle and <code>MouseArea</code>) and I want to click that button even if the child rectangle is covering the button. Here is an example&quot;</p>
  <pre><code>import QtQuick 2.15
  import QtQuick.Window 2.0
  import QtQuick.Controls 2.15
  
  Window {
    visible: true
    width: 800
    height: 800
  
    Rectangle {
        id: root
        anchors.fill: parent
        color: &quot;yellow&quot;
  
        Button {
            id: button1
            x: 314
            y: 182
            text: qsTr(&quot;Button&quot;)
            onClicked: console.log(&quot;Hello&quot;)
        }
  
        Rectangle {
            id: panel
            width: parent.width
            height: parent.height * 0.8
            radius: 20
            color: &quot;orange&quot;
            opacity: 0.2
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                drag.target: panel
                drag.minimumY: 0
                drag.maximumY: 0
                drag.minimumX: -panel.width
                drag.maximumX: 0
                onReleased: {
                    //if the panel is swiped more than 30% it will hide
                    //else it will go back to the original position
                    //this makes a pretty nice effect :)
                    if (panel.x &lt; -panel.width * 0.3) {
                        //we need to make sure that a state change happens to
                        //fire the transition animation
                        root.state = &quot;show&quot;
                        root.state = &quot;hide&quot;
                    }
                    else {
                        root.state = &quot;hide&quot;
                        root.state = &quot;show&quot;
                    }
                }
            }
        }
  
        Rectangle {
            id: button
            width: 45
            height: width
            radius: 5
            color: &quot;lightblue&quot;
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    root.state = root.state === &quot;show&quot; ? &quot;hide&quot; : &quot;show&quot;
                }
            }
        }
  
        state: &quot;show&quot;
        states: [
            State {
                name: &quot;hide&quot;
                PropertyChanges { target: panel; x: -panel.width }
            },
            State {
                name: &quot;show&quot;
                PropertyChanges { target: panel; x: 0 }
            }
        ]
  
        transitions: Transition {
            NumberAnimation {
                target: panel
                property: &quot;x&quot;
                duration: 1000
                easing.type: Easing.OutCubic
            }
        }
    }
  }
  </code></pre>
  <p>How can I click on the button without swiping the child rectangle?</p>