利用InverseMouseArea捕捉在有效区域以外的鼠标事情首先，我们来创建一个Popup.Popup.import

在有些设计中，比如，我们想在鼠标所在的区域以外响应我们的鼠标按钮事件来消除一个popup，那么我们可以利用Ubuntu SDK中所提供的InverseMouseArea来实现这个功能．

下面我们来通过一个例子来展示如何利用InverseMouseArea来实现这个功能．

首先，我们来创建一个Popup.qml文件

Popup.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

Rectangle {
    anchors.centerIn: parent
    width: parent.width/2
    height: width
    color: "darkgray"
    radius: 10

    InverseMouseArea {
       anchors.fill: parent
       acceptedButtons: Qt.LeftButton
       onPressed: parent.destroy()
    }
}

在上面的Popup定义了一个InverseMouseArea．当我们在这个Popup以外的地方进行点击的时候，那么它将自动销毁．

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "inversemouse.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("inversemouse")

        Rectangle {
            width: parent.width
            height: parent.height/2
            border.color: "red"

            Button {
                id: button
                text: "Press me"
                onClicked: {
                    var component = Qt.createComponent("Popup.qml");
                    var obj = component.createObject(parent);
                    obj.visible = true;
                }
            }
        }
    }
}

在我们的Main.qml中，我们利用一个按钮＂Press me＂．当它被点击的时候，动态地生产一个Popup的控件．当我们在控件上点鼠标时，没有任何事情发生，但是如果，我们在它之外的任何一个地方点击的时候，那么这个Popup就会被销毁．

运行我们的应用：

当然如果我们想在我们的Popup中得到鼠标的按钮信息的话，我们也可以在我们的Popup中加入MouseArea来进行捕获．

Popup.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

Rectangle {
    anchors.centerIn: parent
    width: parent.width/2
    height: width
    color: "darkgray"
    radius: 10

    MouseArea {
        anchors.fill: parent

        onClicked: {
            console.log("it is clicked inside popup")
        }
    }

    InverseMouseArea {
       anchors.fill: parent
       acceptedButtons: Qt.LeftButton
       onPressed: parent.destroy()
    }
}

整个项目的代码在： github.com/liu-xiao-gu…
\

另外如果我们想对鼠标的点击区域进行限制的话，我们可以通过利用：

sensingArea : Item\

来做限制，比如下面的代码：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "inversemouse1.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("inversemouse1")

        Rectangle {
            width: units.gu(40)
            height: units.gu(71)
            border.color: "yellow"
            border.width: units.gu(1)

            MouseArea {
                anchors.fill: parent
                onClicked: console.log("clicked on the root component")
            }

            Rectangle {
                id: blueRect
                width: units.gu(30)
                height: units.gu(51)
                anchors.centerIn: parent
                color: "blue"

                Rectangle {
                    width: units.gu(20)
                    height: units.gu(20)
                    anchors.centerIn: parent
                    color: "red"

                    InverseMouseArea {
                        anchors.fill: parent
                        sensingArea: blueRect
                        onClicked: console.log("clicked on the blue rect")
                    }
                }
            }
        }
    }
}

在上面的代码中，我们通过blueRect来限制InverseMouseArea的作用范围．也就是在蓝色和红色直接的范围才会显示：

qml: clicked on the blue rect

而在其它的任何地方点击时都会显示：

qml: clicked on the root component

我们的应用的显示如下：

整个项目的源码在： github.com/liu-xiao-gu…

更多关于这个API的阅读，请参阅连接 InverseMouseArea．