QML MouseArea Overlap other widget

Question

Here is some simple QML code which contains a Button and a MouseArea. I want the Button to detect both left and right mouse clicks.

Rectangle {
    anchors.fill:parent;
    width: 1302
    height: 638

    Button {
        id: button1
        x: 378
        y: 332
        width: 194
        height: 66
        text: qsTr("Button")
    }

    MouseArea {
        id: mouseArea1
        x: 368
        y: 306
        width: 226
        height: 108
        acceptedButtons: Qt.RightButton
        propagateComposedEvents: true
        onClicked: {
            console.log("Click")
            mouse.accepted = false
        }
    }
}

Since the MouseArea is positioned on top of the Button, how can I force the Button to accept the mouse events?

You don't have any click handler in the Button. How do you get response? Don't use anchors.fill and width/height together. And use z if you really want to overlap one surface with another one. And as I know Button doesn't response to right mouse click. What exactly do you try to do here? — folibis
I want to popup a context menu when right-click on a button. — illunara
But more importantly, MouseArea get all the mouseEvent of other widget when we put on top of them (like tableView, textEditor.....) How can i fix it? — illunara
Hmm ... use mouse.accepted=false inside MouseArea events. But see the doc if event you use affected by mouse.accepted. For example, onClick doesn't affected by mouse.accepted. — folibis

folibis folibis · Accepted Answer · 2015-02-24T03:31:44

Try this, if I understand you:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2


Window {
    id: screen
    width: 800
    height: 600
    visible: true

    Button {
        anchors.centerIn: parent
        text: qsTr("Button")
        onClicked: {
            console.log("Button was clicked");
        }
        z: 100
        MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                onClicked: {
                    console.log("Button right button was clicked");
                    mouse.accepted = true
                }
            }
    }

    MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.RightButton
            propagateComposedEvents: true
            onClicked: {
                console.log("Window right button was clicked")
            }
            z: 99
        }
}

But I advice you to use common way to show button popup. Use Button.menu to show pull-down menu button.

QML MouseArea Overlap other widget

1 Answers