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，则组合事件将自动传播到场景中相同位置的其他MouseArea。 每个事件按堆叠顺序传播到其下方的下一个启用的 MouseArea，向下传播此视觉层次结构，直到 MouseArea 接受该事件。 与按下事件不同，如果没有处理程序存在，组合事件将不会被自动接受。

如果您想专门捕捉鼠标点击其中一个，只需将 MouseArea 移动到 Button 下的 z 水平即可。 或者，只需将其定义移到 Button 之前。

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
  }
}