QML- Right Click Not Detected in MouseArea

Question

I'm working on an image editor and specifically working on setting the current left or right button's associated color using a MouseArea (inside a Button type). The problem I'm having is that I can't seem to filter for particular buttons at all. Here's the snippet giving me trouble:

    Button {
        x: 60
        width: 80
        height: 40
        text: "Blue"

        anchors.verticalCenter: parent.verticalCenter

        onButtonClick: {
            if(mouseArea.pressedButtons & Qt.RightButton) {
                console.log("Right button used");
                GlobalState.setRightColorValues(0.0, 0.0, 1.0, 1.0);
            } else {
                console.log("Left button used");
                GlobalState.setLeftColorValues(0.0, 0.0, 1.0, 1.0);
            }
        }
    }

(If needed I can provide the entirety of Button.qml, but it's mostly from here).

I'm trying to follow the example here, but the method used to filter for right mouse clicks doesn't seem to work (anymore, anyway). What happens is the statement "defaults" to assuming a left click. I've also tried separating the two into different if-statements, but doing so causes no buttons to be filtered explicitly.

What needs to be changed in order to filter for specific mouse buttons? Or will I have to implement the sort of "switch primary color" button used in Paint/Paint.NET?

Edit 1: I've realized that there was a relevant snippet missing from Button.qml-

 MouseArea{
    id: buttonMouseArea;

    acceptedButtons: Qt.AllButtons;
    hoverEnabled: true

    onEntered: parent.color = onHoverColor
    onExited:  parent.color = buttonColor

    anchors.fill: parent;

    onClicked: buttonClick();
}

This is nested inside a Rectangle, which also holds a Text field.

Answer 1

By default MouseArea only handles the left mouse button. You can handle other buttons by setting the acceptedButtons property

MouseArea {
   acceptedButtons: Qt.LeftButton | Qt.RightButton
}

See http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#acceptedButtons-prop

Answer 2

You can check the button this way:

MouseArea {
   acceptedButtons: Qt.LeftButton | Qt.RightButton
   onClicked: {
        if(mouse.button & Qt.RightButton) {
        }
    }
}

Answer 3

What I have observed is that pressedButtons works only with onPressed, not with onClicked.
I find that kind of odd, because clicked() is nothing but a press followed by a release. Hence I assumed that it will work with clicked() as well, but sadly it doesn't.

Example:

MouseArea {
    id: idMouseArea

    acceptedButtons: Qt.LeftButton | Qt.RightButton

    anchors.fill: parent

    //onClicked: {   // pressedButtons not identified with onClicked
    onPressed: {     // pressedButtons identified and works well with onPressed
        if (idMouseArea.pressedButtons & Qt.RightButton) {
            console.log("right-button pressed")
        } else if (idMouseArea.pressedButtons & Qt.LeftButton) {
            console.log("left-button pressed")
        }
    }
}

This is what I have observed with Qt 5.5.1 and QtQuick 2.5. The documentation doesn't show how to use pressedButtons property with if-else. Please correct/comment if the observation is wrong.

---

Update:
If you direly need to use pressedButtons with onClicked you can use following hack to do so.

    MouseArea {
        property int mouseButtonClicked: Qt.NoButton

        acceptedButtons: Qt.RightButton | Qt.LeftButton

        anchors.fill: parent

        onPressed: {
            if (pressedButtons & Qt.LeftButton) {
                mouseButtonClicked = Qt.LeftButton
            } else if (pressedButtons & Qt.RightButton) {
                mouseButtonClicked = Qt.RightButton
            }
        }

        onClicked: {
            if (mouseButtonClicked === Qt.LeftButton) {
                console.log("left button clicked")
            } else if (mouseButtonClicked === Qt.RightButton) {
                console.log("right button clicked")
            }
        }
    }

Answer 4

You can avoid using if statements if you dedicate a MouseArea for each mouse button you're interested in:

MouseArea {
    anchors.fill: parent
    onClicked: console.log("do left click action")
}

MouseArea {
    anchors.fill: parent
    acceptedButtons: Qt.RightButton
    onClicked: console.log("do right click action")
}