How to Prevent overlapping HoverHandler steals event?

arun-holoplot

I have two overlapping rectangles with HoverHandlers in them.

As soon as I hover over the top left corner of the Bottom Rectangle, the Top Rectangle's HoverHandler receives the event.

On the right side, you can see that they are using MouseAreas. I would like to achieve the same result with HoverHanlder.

Is there any way to achieve this behavior?

I tried setting grabPermissions: PointerHandler.TakeOverForbidden for the HoverHandler, but it didn't work.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Shapes 1.15

Window {
    width: 760
    height: 480
    visible: true
    title: qsTr("HoverHandler Test")


    Rectangle {
        width: 150
        height: 100
        color: handler1.hovered ? "orange" : "grey"
        border.color: "black"
        x: 100
        y: 200

        Text {
            x: 10
            y: 10
            text: "HoverHandler"
        }

        HoverHandler {
            id: handler1
            grabPermissions: PointerHandler.TakeOverForbidden
            cursorShape: Qt.SizeVerCursor
        }
    }

    Rectangle {
        width: 150
        height: 100
        color: handler2.hovered ? "red" : "grey"
        border.color: "black"
        x: 200
        y: 250

        HoverHandler {
            id: handler2
            grabPermissions: PointerHandler.TakeOverForbidden
            cursorShape: Qt.SizeHorCursor
        }
    }


    Rectangle {
        width: 150
        height: 100
        color: mouseArea1.hovered ? "orange" : "grey"
        border.color: "black"
        x: 400
        y: 200

        Text {
            x: 10
            y: 10
            text: "MouseArea"
        }

        MouseArea {
            id: mouseArea1
            anchors.fill: parent
            property alias hovered: mouseArea1.containsMouse
            hoverEnabled: true
            cursorShape: Qt.SizeVerCursor
        }
    }

    Rectangle {
        width: 150
        height: 100
        color: mouseArea2.hovered ? "red" : "grey"
        border.color: "black"
        x: 500
        y: 250

        MouseArea {
            id: mouseArea2
            anchors.fill: parent
            property alias hovered: mouseArea2.containsMouse
            cursorShape: Qt.SizeHorCursor
            hoverEnabled: true
        }
    }
}

fcarney

See if changing this: https://doc.qt.io/qt-5/qml-qtquick-hoverhandler.html#acceptedButtons-prop to Qt.NoButton keeps it from stealing click events.

lemons

assuming this is the intended behavior, you could simply disable the lower one while the upper one is hovered.

HoverHandler {
    id: handler1
    enabled: !handler2.hovered
    cursorShape: Qt.SizeVerCursor
}

arun-holoplot

@lemons This does not work for me since the rectangles were created dynamically in the real case, and there will be more than two

Mammamia

@fcarney hmm, Unfortunately It didn't. :(