MouseArea Stole QML Element Mouse Events

Question

If I put MouseArea on a QML element, then MouseArea steal all mouse events. Thus, TextEdit will be inseparable and non-selectable.

 TextEdit { // some properties MouseArea { // some properties OnClicked: { /* do something */ } } } 

Is there any way to solve it?

By the way, if I put a large MouseArea on another MouseArea , then more MouseArea steal all mouse events. How to solve this? I think manually passing mouse events can solve this, but how to do it?

Answer 1

You must enable MouseArea to propagate configured events, such as clicked or released , to the lower component, as described in @Torgeirl's answer.

If you want your TextEdit , Slider or CheckBox receive such events, just go through the event by setting its accepted property to false .

Code example:

 RowLayout { TextEdit { text: "Hi" } Slider {} CheckBox { text: "CheckBox"} MouseArea { anchors.fill: parent propagateComposedEvents: true onClicked: mouse.accepted = false; onPressed: mouse.accepted = false; onReleased: mouse.accepted = false; onDoubleClicked: mouse.accepted = false; onPositionChanged: mouse.accepted = false; onPressAndHold: mouse.accepted = false; } } 

Answer 2

There is a propagateComposedEvents property that allows MouseArea skip mouse events such as clicked() . You must set event.accepted = false in the event handler.

See the documentation for MouseArea and the propagateComposedEvents property for more information and an example.

Answer 3

You can try something similar for your specific case:

 Rectangle { MouseArea { id: mouseAreaTop anchors.fill: parent OnClicked: { /* do something */ } } TextEdit { /* Do whatever */ } } 

Please note that I ordered them. All children will have a higher z than the parent. Siblings following later in the tree for the parent have higher z values.

The general idea is this:

• Identify all areas of the mouse.
• Sort them by z

Read about the z properties here in the Qt documentation , you can understand how to arrange the mouse areas.

eg:

 Parent { anchors.fill: parent child1 { anchors.fill: parent z: 2 } child2 { anchors.fill: parent z: 1 } child3 { anchors.fill: parent z: 4 } child4 { anchors.fill: parent z: 3 } } 

In this example, I redefined the natural order by assigning z values ​​to myself.