MouseArea stole QML element's mouse events

Question

If I put a MouseArea on a QML element, then MouseArea will steal all mouse events. Thus, TextEdit will be uneditable and unselectable.

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

Is there a way to solve it?

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

Solution 1

You have to enable the MouseArea to propagate the composed events like clicked or released to the underneath component, as described by @Torgeirl's answer.

If you want your TextEdit, Slider or CheckBox to receive these kind of events, simply pass through the event by setting its accepted property to false.

Sample code:

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;
    }
}

Solution 2

There is the property propagateComposedEvents which allows a MouseArea to let through mouse events such as clicked(). You have to set event.accepted = false in the event handler.

Please, see the documentation for MouseArea and the property propagateComposedEvents for more information and example.

Solution 3

You can try something like this for your particular case:

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

   TextEdit 
   {
      /* Do whatever  */       
   }
}

Note that I have arranged these in an order. All children will have higher z than parent. Siblings coming later in the tree for a parent, have higher z values.

General idea is like this :

1. Define all the mouse areas
2. Arrange them on the z values

Read about z property here in the Qt documentation, you will be able to 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 have overridden the natural ordering by assigning the z values myself.

Comments

[比尔盖子]

I use Qt4. I can not use it.

[比尔盖子]

No. That's isn't what I want. In your first example, mouseEvent will not emit because TextEdit is higher than mouseArea. I want TextEdit accept mouseEvent and selectable at the same time. I want to find a way to simulate Qt 5'spropagateComposedEvents feature in Qt 4.

[Mitch]

I was looking for a solution to something else when I came across this, and just thought I'd point out that there are some signal handlers for which setting mouse.accepted = false has no effect (search MouseArea docs for has no effect to find them all).

[Matt M]

This solution does not work if I want continuous updates on mouseX and mouseY. Change the TextEdit in the example code above to show the mouse X,Y location and you will see it stops updating whenever the mouse button is held down. Setting "mouse.accepted = false" in onPressed causes the MouseArea properties to not be updated until the button is released. Not sure if this is a bug?

[Admin]

this sames resoved,by BaCaRoZzo and szotsaki Method，thank you very much