qml MouseArea鼠标穿透问题

先来看一段代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
Window {

    visible: true
    width: 640
    height: 480

    title: qsTr("Hello World")

    color: "red"



    Button {
        anchors.centerIn: parent;
        width: 20
        height: 20;
        id:btnFullOrSmaller
        property bool flag: false;
        tooltip: "全屏"

        style:ButtonStyle {
            background: Rectangle {
                color: "transparent"
            }
        }

        Image {
            id: btnImage;
            width: 20
            height: 20;

            source: "qrc:/images/fullscreen.png"
        }

        /*DropShadow {
            visible:true;
            anchors.fill: parent;
            horizontalOffset: 0;
            verticalOffset: 0;
            radius: 6;
            samples: 2;
            color: "blue";
            source: parent;
            spread: 6;
        }*/


        onClicked: {
            console.log("fullscreen clicked",flag);

            flag = !flag;

            if(flag){

                btnImage.source = "qrc:/images/fullscreen_exit.png"

            } else {

                btnImage.source = "qrc:/images/fullscreen.png"

            }

        }

    }//END Button




    MouseArea {
        anchors.fill: parent;
        enabled: true;

        onEntered: {
            console.log("onEnte")
        }

        onClicked: {
            console.log("clicked");
        }

        onExited: {
            console.log("onExite")
        }
    }

}

运行结果：

不管点击父窗体还是Button本身，都打印clicked，这显然不是我们想要的结果。

我们的想要的效果是点击父窗体时打印

qml:clicked

点击button时打印

qml:fullscreen clicked

现在有两种方法可以解决：

1）.把MouserArea放在最前面

2）.给Button设置z序如：

最后的运行结果：

欢迎各位同学提出更好的方案，大家相互沟通学习。