Question

这是我的QML代码：

Rectangle
{
    .....
    Rectangle
    {
        ....height and width is smaller than parent
        MouseArea
        {
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:
            {
                console.log("enter 2")
            }
        }
    }


    MouseArea
    {
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true

        onEntered:
        {
            console.log("enter 1")
        }
    }
}

只有mouseArea1生效。如果我删除mouseArea1，则mouseArea2生效。所以我认为鼠标事件必须由mouseArea1处理，并且不能传递给mouseArea2。

我搜索文档以找出哪个attr可以阻止此类行为但未找到任何内容。那么如何让mouseArea1和mouseArea2同时生效呢？

Answer 1

对于“组合”鼠标事件 - clicked，doubleClicked和pressAndHold - 您可以使用propagateComposedEvents属性实现此目的。但这不适用于此，因为悬停事件不是由事件组成的。

因此，您需要做的是更改评估MouseArea的顺序。

一个简单的技巧是交换QML源本身中两个MouseArea的顺序。通过将较小的一个放在较大的一个之后，较小的一个优先：

Rectangle{
    //.....
    MouseArea{
        id: mouseArea1
        anchors.fill: parent
        hoverEnabled: true

        onEntered:{
            console.log("enter 1")
        }
    }

    Rectangle{
         //....height and width is smaller than parent
        MouseArea{
            id: mouseArea2
            anchors.fill: parent
            hoverEnabled: true

            onEntered:{
                console.log("enter 2")
            }
        }
    }
}

实现相同目标的第二种方法是向最高z添加MouseArea索引，该索引大于较低的z索引。默认情况下，每个元素的0索引都为z: 1，因此只需将MouseArea添加到较小的Rectangle{ //..... Rectangle{ //....height and width is smaller than parent MouseArea{ z: 1 // <----------------- id: mouseArea2 anchors.fill: parent hoverEnabled: true onEntered:{ console.log("enter 2") } } } MouseArea{ id: mouseArea1 anchors.fill: parent hoverEnabled: true onEntered:{ console.log("enter 1") } } }即可：

#=====================================
# Configure Instance
#=====================================

    org.quartz.scheduler.instanceName = MyClusteredScheduler

    org.quartz.scheduler.instanceId = AUTO

#===================================
# Configure ThreadPool
#===================================

    org.quartz.threadPool.class = org.quartz.simpl.SimpleThreadPool

    org.quartz.threadPool.threadCount = 25

    org.quartz.threadPool.threadPriority = 5


#===================================
# Configure JobStore
#===================================

    org.quartz.jobStore.misfireThreshold = 60000

    org.quartz.jobStore.class = org.quartz.impl.jdbcjobstore.JobStoreTX

    org.quartz.jobStore.driverDelegateClass = org.quartz.impl.jdbcjobstore.oracle.OracleDelegate

    org.quartz.jobStore.useProperties = false

    org.quartz.jobStore.tablePrefix = TABLE_PREFIX_NAME

    org.quartz.jobStore.dataSource = customDataSourceName

    org.quartz.jobStore.isClustered = true

    org.quartz.jobStore.clusterCheckinInterval = 20000

#===================================
# Configure Datasources  
#====================================

    org.quartz.dataSource.customDataSourceName.jndiURL =
    java:comp/env/jdbc/SomeName

    org.quartz.dataSource.customDataSourceName.maxConnections = 5

    org.quartz.dataSource.customDataSourceName.validationQuery = 
    select 0 from dual

#================== END OF FILE ==========

Answer 2

我在文档中找到了解决方案。以下面的QML代码为例：

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

这里黄色Rectangle包含一个蓝色矩形。后者是可视堆叠顺序层次结构中最顶层的项目;它会在视觉上呈现在前者之上。

由于蓝色Rectangle将propagateComposedEvents设置为true，并且还为所有收到的点击事件设置MouseEvent::accepted至false，因此它收到的所有点击事件均为传播到它下面的黄色矩形的MouseArea。

点击蓝色Rectangle将导致调用其子onClicked的{{1}}处理程序;然后，该事件将传播到黄色MouseArea的{{1}}，从而导致调用自己的MouseArea处理程序。

如何使双MouseArea生效？

2 个答案: