The following piece of code generates a white rectangle containing a red rectangle and a grey rectangle. Every rectangle has an associated MouseArea. The grey rectangle becomes blue when the mouse is clicked inside it. The red rectangle prints a console message when the mouse cursor enters inside it and another message when the released signal is emitted.
I would like to:
- press and hold the mouse button inside the grey rectangle (becoming blue)
- move the cursor outside the grey/blue rectangle and then inside the red rectangle, without releasing the button and capturing the entered signal of the red rectangle
- release the button having the cursor inside the red rectangle and capturing the released signal of the red rectangle.
Is it possible? With the current code, the entered signal of the red rectangle is only emitted if the mopuse button is not pressed while entering and the released signal is only emitted if the button was pressed inside that rectangle. The problem, evidently, is that the grey/blue rectangle takes the control of mouse events if the button is pressed there.
This is a similar, but simplified, scenario to the one I am having in an application I am developing.
import QtQuick 2.0
Rectangle{
color: "white"
height: 210
width: 500
MouseArea{
id: mainMa
anchors.fill: parent
hoverEnabled: true
onReleased:{console.log("white-released")}
}
Column{
spacing: 10
Rectangle{
color: "red"
height: 100
width: 500
MouseArea{
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
onEntered:{console.log("red-enter")}
onReleased:{console.log("red-released")}
}
}
Rectangle{
color: "#666666"
height: 100
width: 500
MouseArea{
id: ma
anchors.fill: parent
hoverEnabled: true
onPressed: {parent.color = "blue"; console.log("grey pressed")}
onReleased: {parent.color = "#666666"; console.log("grey released")}
}
}
}
}