Qml 鼠标区域事件传递

MouseArea    

MouseArea元素的一个很典型的用法是和一个可视的item一起用，处理这个item的鼠标响应。
我们将MouseArea放到Rectangle中，当单击Rectangle区域中时，Rectangle颜色会变成红色。

 import QtQuick 2.0

 Rectangle {
     width: 100; height: 100
     color: "green"

     MouseArea {
         anchors.fill: parent
         onClicked: { parent.color = 'red' }
     }
 }

鼠标MouseArea是一种不可见的项目，通常与可见项目结合使用，以便为该项目提供鼠标操作。通过有效地充当代理，鼠标处理的逻辑可以包含在MouseArea项中。

enabled属性用于启用和禁用代理项的鼠标处理。禁用时，鼠标区域对鼠标事件透明。

MouseArea是不可见的项目，但它有一个可见的属性。设置为false时，鼠标区域对鼠标事件透明。

pressed read-only属性指示用户是否在鼠标区域上按下鼠标按钮。此属性通常用于用户界面中属性之间的绑定。

containsMouse只读属性表示鼠标光标位于鼠标区域上，但默认情况下，仅当按下鼠标按钮时；有关详细信息，请参阅containsMouse文档。

有关鼠标位置和按钮点击的信息通过定义事件处理程序属性的信号提供。最常用的是处理鼠标按下和点击：onClicked、onDoubleClicked、onPressed、onrelease和onpresseandhold。还可以通过onWheel信号处理鼠标滚轮事件。

如果鼠标earea与其他鼠标earea项目的区域重叠，您可以通过将propagateComposedEvents设置为true并拒绝应传播的事件，选择将clicked、Double clicked和按住事件传播到这些其他项目。有关详细信息，请参阅propagateComposedEvents文档。

默认情况下，MouseArea项只报告鼠标单击，而不报告鼠标光标位置的更改。设置hoverEnabled属性可以确保使用为onPositionChanged、onEntered和onExited定义的处理程序，并且即使没有按下鼠标按钮，containsMouse属性也会更新。

有先后优先级

MouseArea的调用，有先后优先级，后续的设置会覆盖前面的设置。局部的调用没有被触发。
 

Rectangle
Text
MouseArea  其余地方响应
AvatarImage{ 
     MouseArea  先响应
}

书写在下面的元素，在界面中放置在上面。

MouseArea重叠穿透

像clicked, doubleClicked， pressAndHold这些事件称为 composed events（组合事件），而press、release 等事件则称为basic events（基本事件）。组合事件由基本事件组成。

正常点击的事件顺序是 ： pressed->released->clicked 其中 clicked是组合事件。

重叠区域鼠标穿透。

比如桌面窗口是大矩形，程序窗口是小矩形。这时候就产生了mouseArea的重叠。

不做处理是上层区域会响应，而被遮挡区域不会响应。

我们希望点击重叠区域时， 小矩形先响应和被遮挡矩形后响应，  就需要穿透。

在上层区域的事件处理函数（如onClick）里 写 mouse.accepted = false ，同时在 MouseArea里将propagateComposedEvents:设置为true ，可以将事件传递给底层（parent）的MouseArea。

pressed等基本事件， 就会传递下去。

propagateComposedEvents默认为false   ，需要设置为true

proposal 提议，propagate 传播

propagateComposedEvents: true

mouse.accepted = false

propagateComposedEvents

propagateComposedEvents属性，控制组合鼠标事件是否能自动传播到与此鼠标区域重叠的而且视觉堆叠顺序较低的其他鼠标区域MouseArea中。默认情况下，propagateComposedEvents属性为false。

MouseArea包含几个组合事件：点击、双击和按住。它们由基本鼠标事件（如按下）组成，与基本事件相比，可以以不同的方式传播。

如果将propagateComposedEvents设置为true，则合成的事件将自动传播到场景中同一位置的其他鼠标区域。每个事件都会按堆叠顺序传播到它下面的下一个启用的MouseArea，沿着这个视觉层次结构传播，直到MouseArea接受该事件。与按下的事件不同，如果没有处理程序，则不会自动接受合成的事件。

例如，下面是一个包含蓝色矩形的黄色矩形。蓝色矩形是视觉堆叠顺序层次结构中最顶层的项目；它将在黄色矩形上方进行视觉渲染。由于蓝色矩形将所有接收到的单击事件的propagateComposedEvents设置为true，并将MouseeEvent:：Accept设置为false，因此它接收到的任何单击事件都会传播到其下方黄色矩形的MouseeArea。

如下代码：

Rectangle {
        color: "yellow"
        width: 100; height: 100

        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked yellow")
        }

        Rectangle {
            color: "blue"
            width: 50; height: 50

            MouseArea {
                anchors.fill: parent
                propagateComposedEvents: true
//propagateComposedEvents为FALSE，点击该区域只会打印"clicked blue"，不会穿透到下层的父控件
                 //置为true后，不但打印"clicked blue"，还会打印"clicked yellow"
                onClicked: {
                    console.log("clicked blue")
                    mouse.accepted = false
                }
            }
        }
    }