如何使双重MouseArea生效? [英] How to make double MouseArea take effect?

问题描述

这是我的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.

Only mouseArea1 takes effect. If I remove mouseArea1 then mouseArea2 takes effect. So I think the mouse event must be handled by mouseArea1 and let it couldn't be passed to mouseArea2.

我搜索了文档，以找出哪个attr可以防止这种行为，但没有发现.那么如何让mouseArea1和mouseArea2同时生效?

I search the document to find out which attr can prevent such behavior but nothing found. So how to let the mouseArea1 and mouseArea2 take effect at the same time?

推荐答案

对于组合"鼠标事件-clicked，doubleClicked和pressAndHold –您可以使用

For "composed" mouse events -- clicked, doubleClicked and pressAndHold -- you can achieve this using the propagateComposedEvents property. But that won't work here because hover events are not composed events.

因此，您需要做的是更改MouseArea的求值顺序.

So what you need to do instead is to change the order in which the MouseAreas are evaluated.

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

One simple trick is to swap the order of the two MouseAreas in the QML source itself. By placing the smaller one after the larger one, the smaller one takes precedence:

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

实现相同目的的第二种方法是在最上面的MouseArea上添加一个z索引，该索引大于下面的索引.默认情况下，每个元素的z索引为0，因此只需将z: 1添加到较小的MouseArea即可达到目的:

A second method that achieves the same thing is to add a z index to the topmost MouseArea that's greater than the lower one. By default every element has a z index of 0, so just adding z: 1 to the smaller MouseArea will do the trick:

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

这篇关于如何使双重MouseArea生效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！