【转载】 qml: MouseArea重叠问题；

原文： https://blog.csdn.net/qq_15024587/article/details/80000443

MouseArea控件大家应该是很熟悉的了.   使用起来也是非常方便的说.   但是在使用MouseArea的时候也有些需要我们注意的地方.我在开发的过程中就遇到了一些问题,现在就分享一下.

代码片段1:

Item {

        width: 860

        height: 640

        Button{

            width: 86

            height: 64

            anchors.centerIn: parent

            onClicked: {

                console.log("button clicked")

            }

        }

        MouseArea{

            anchors.fill: parent

            onClicked: {

                console.log("mouseArea clicked")

            }

        }

    }

代码片段2:

Item {

        width: 860

        height: 640

        MouseArea{

            anchors.fill: parent

            onClicked: {

                console.log("mouseArea clicked")

            }

        }

        Button{

            width: 86

            height: 64

            anchors.centerIn: parent

            onClicked: {

                console.log("button clicked")

            }

        }

    }

大家可以看到这两段代码的不同之处就是MouseArea的为何和Button的位置坐了互换.  但是就是这样一个简单的操作会出现意想不到的情况,带代码片段1的运行情况是无论点击这个Item区域还是Button按钮都会出现 mouseArea clicked日志

代码片段2运行的情况是点击Item区域会出现mouseArea clicked日志,但是点击Button按钮会出现button clicked日志.