Catching mouse events from QML

Question

I want to create a QML item which disappears when the mouse moves outside of it. Here is my code:

Item {
  id: disappearing_element

  ListView { ... }

  MouseArea {
    id: collapser
    anchors.fill: parent
    propagateComposedEvents: true
    hoverEnabled: true

    onExited: {
      disappearing_element.visible = false
    }
  }
}

It works well, but MouseArea propagates events like onClicked() onDoubleClicked() only (as said in Qt docs).

Is there a way to notify disappearing_element's childrens about mouse enter and mouse exit events (without using a Popup element)?

You can use disappearing_element.visible for notifications to the children by binding to it, i.e. property bool someProp : parent.visible; onSomePropChanged: { ...your stuff... } — dtech
You misunderstand me. I want to propagate MouseEvent to disappearing_element's childrens to check if one of them contains mouse cursor or not. — Deedee Megadoodoo
Did you try using the Item itemAt(int x, int y) function of ListView? — dtech
List elements in QML are not direct children of the view, there is a contentItem in between. — dtech
Possible duplicate of How to include child mouse hover events in the parent MouseArea using QML? — S.M.Mousavi

Jimmy Chen Jimmy Chen · Accepted Answer · 2016-08-21T06:01:01

I think this is one of the common needs when developing QtQuick apps. One solution we currently use quite often is to add MouseArea in each of the children that need check mouse containment, and emit signals (and catch these signals in your main item) when the mouse enters or exits.

Things go a bit complicated when the children items also need such mechanism to manage their children. However, for common usage, this approach is enough for us right now.

Catching mouse events from QML

1 Answers