qml中关于多个MouseArea之间的事件传递（propagateComposedEvent）

import QtQuick 2.0

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
onClicked: {
console.log("clicked blue")
mouse.accepted = false
}
}
}

}

在帮助文档中，propagateComposedEvents属性，当为true时，可以传递鼠标事件。默认值为false。在设置propagateComposedEvents属性后，点击事件触发后，添加一行代码 mouse.accepted = false ，，鼠标事件即可通过该MouseArea传递到其下层（Mousea之间的关系不一定非要是parent关系），若不加mouse.accepted = false 则设置propagateComposedEvents属性是无效的，以上代码可在Qt帮助文档中看到，由于Mousea组件默认鼠标事件无法传递，故可设置模态和非模态界面

补充下

import QtQuick 2.0

Rectangle {

color: “yellow”

width: 100; height: 100

MouseArea {
anchors.fill: parent
onClicked: {
console.log("clicked yellow");
}
onPressed:{
console.log("Pressed yellow")
}
onReleased:{
console.log("Released yellow");
}
}

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

MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: {
console.log("clicked blue")
mouse.accepted = false
}
onPressed:{
console.log("Pressed blue")
mouse.accepted = false;
}
onReleased:{
console.log("Released blue");
mouse.accepted = false;
}
}
}

}

pressed released clicked事件的先后顺序

对于blue进行操作；

注掉pressed和released事件，yellow 只触发了 clicked事件

注掉clicked和released事件，yellow三个事件都触发了

注掉clicked和pressed事件，yellow只触发了released事件

可以看出，pressed信号优先，blue被mouse.accepted = false之后，blue便不可触发信号。