QML- Right Click Not Detected in MouseArea - qt

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. You can determine which button caused the click by using the mouse MouseEvent that is accessible in the onClicked handler.
MouseArea {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) { // 'mouse' is a MouseEvent argument passed into the onClicked signal handler
console.log("right button clicked!")
} else if (mouse.button === Qt.LeftButton) {
console.log("left button clicked!")
}
}
}
See acceptedButtons, and mouse MouseEvent

Answer 2

You can check the button this way:
MouseArea {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if(mouse.button & Qt.RightButton) {
}
}
}

Answer 3

You can avoid using if statements if you dedicate a MouseArea for each mouse button you're interested in:
import QtQuick
import QtQuick.Controls
Page {
Rectangle {
anchors.centerIn: parent
color: "#ffe"
border.color: "grey"
width: parent.width / 2
height: parent.height / 2
Text {
id: txt
anchors.centerIn: parent
text: "Use Mouse here"
}
MouseArea {
anchors.fill: parent
onClicked: txt.text = "left click detected";
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton
onClicked: txt.text = "right click detected";
}
}
}
You can Try it Online!

Answer 4

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