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

最新推荐文章于 2025-09-28 09:38:32 发布

翻译最新推荐文章于 2025-09-28 09:38:32 发布 · 8k 阅读

文章标签：

#MouseArea

Qt 专栏收录该内容

42 篇文章

订阅专栏

本文探讨了Qt中鼠标事件的传递机制，特别是如何通过设置propagateComposedEvents属性实现跨层级的事件传播，并展示了不同鼠标事件（如pressed、released、clicked）触发的顺序及其相互间的影响。

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便不可触发信号。