QML MouseArea，触发和传播事件

Question

我有一个带有按钮的QML组件..。在里面。我放置了一个涵盖整个组件的MouseArea，因为我需要在单击组件的任何地方执行一个操作。但是，我也想执行MouseArea后面的操作。

例如，如果我单击组件中的一个按钮，我希望执行MouseArea操作，然后执行按钮操作。

Item {

  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
  }

  MouseArea{
    anchors.fill: parent
    propagateComposedEvents: true
    onClicked: console.info("MouseArea clicked")
  }
}

如果propagateComposedEvents: true，则MouseArea onClicked不会执行，但是Button onClicked会执行。如果为false，则执行MouseArea，但不执行Button onClicked。

我希望同时执行MouseArea (第一个)和Button (第二个)信号onClicked。

Answer 1

您只需要将鼠标的可接受属性设置为false。

Item {

  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
  }

  MouseArea{
    anchors.fill: parent
    propagateComposedEvents: true
    onClicked: {
        console.info("MouseArea clicked");
        mouse.accepted =false;
  }
}

来自MouseArea文档：

如果propagateComposedEvents设置为true，则复合事件将自动传播到场景中相同位置的其他MouseAreas。每个事件按照堆叠顺序传播到下一个启用的MouseArea，然后向下传播这个可视层次结构，直到MouseArea接受该事件为止。与按下事件不同，如果不存在处理程序，则不会自动接受组合事件。

如果您想要专门捕捉鼠标单击其中之一，只需移动按钮下的MouseArea关于它的z级别。或者，在按钮之前移动它的定义。

Item {
  MouseArea{
    anchors.fill: parent
    onClicked: console.info("MouseArea clicked")
  }

  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
  }
}

或：

Item {
  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
    z: 1
  }

  MouseArea{
    anchors.fill: parent
    onClicked: console.info("MouseArea clicked")
    z: 0
  }
}