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?

score 28 · Accepted Answer · edited Apr 21 '15 at 12:18

28

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

edited Apr 21 '15 at 12:18

BaCaRoZzo

7,502
6
51
82

answered Apr 21 '15 at 07:27

szotsaki

684
7
16

6

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). – Mitch Jun 04 '15 at 14:20
2

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? – Matt M Jan 26 '17 at 20:34

score 5 · Answer 2 · edited Jul 25 '15 at 20:35

5

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.

edited Jul 25 '15 at 20:35

Ivan Kush

2,958
2
23
39

answered Apr 25 '13 at 18:49

Torgeirl

51
1

I use Qt4. I can not use it. – 比尔盖子 Apr 26 '13 at 05:06

Amit Tomar · Answer 3 · 2013-04-24T13:14:03.183

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 :

Define all the mouse areas
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.

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's`propagateComposedEvents` feature in Qt 4. — 比尔盖子, Apr 28 '13 at 04:32

score 0 · Answer 4 · answered Sep 08 '18 at 19:21

                //消息框
                Rectangle {
                    id:msgRectangle
                    width: Math.min(messageText.implicitWidth +14, listView.width -98)
                    height: messageText.implicitHeight + 16
                    color:  send ? "#9dea6a" : "#eeeeee"
                    radius: 3
                    TextEdit {
                        id: messageText
                        text: content
                        wrapMode: TextEdit.Wrap
                        enabled: true
                        readOnly: true
                        selectByKeyboard: true
                        selectByMouse: true
                        selectedTextColor: "white"
                        persistentSelection:true
                        selectionColor: "#3396FF"

                    }
                    MouseArea{
                        id:text_area
                        width: parent.width
                        height: parent.height
                        acceptedButtons: Qt.LeftButton|Qt.RightButton
                        propagateComposedEvents: true
                        onClicked: {
                            if(mouse.button===Qt.LeftButton){
                                mouse.accepted = false;
                            } else {
                                mouse.accepted = true;
                            }

                        }
                        onPressed: {
                            if(mouse.button===Qt.LeftButton){
                                mouse.accepted = false;
                            } else {
                                mouse.accepted = true
                            }
                        }
                        onReleased:{
                            if(mouse.button===Qt.LeftButton){
                                mouse.accepted = false;
                            } else {
                                mouse.accepted = true
                            }
                        }
                        onDoubleClicked:{
                            if(mouse.button===Qt.LeftButton){
                                mouse.accepted = false;
                            } else {
                                mouse.accepted = true
                            }
                        }
                        onPositionChanged:{
                            if(mouse.button===Qt.LeftButton){
                                mouse.accepted = false;
                            } else {
                               mouse.accepted = true
                            }
                        }
                        onPressAndHold:{
                            if(mouse.button===Qt.LeftButton){
                                mouse.accepted = false;
                            } else {
                                mouse.accepted = true
                            }
                        }
                   }
                }

this sames resoved,by BaCaRoZzo and szotsaki Method，thank you very much — 李玉峰, Sep 08 '18 at 19:23

MouseArea stole QML element's mouse events

4 Answers4