[SOLVED] How to prevent a QML ListView from stealing mouse events from a QQuickPaintedItem?

  • How can I prevent a QML ListView from stealing mouse events from a QQuickPaintedItem that's in the list?

    Some background info: My QML ListView is configured as a horizontal list. Its delegate is a Component which contains a Loader. The Loader loads a QML page on demand at each item in the list, as specified via the ListElements in my ListModel. It's a pretty simple concept.

    More background info: A couple of these QML pages contain a QQuickPaintedItem graph with draggable points. The QQuickPaintedItem is set up to receive mouseMoveEvent, mousePressEvent, mouseReleaseEvent in the typical way. These QQuickPaintedItems are exposed to QML via qmlRegisterType(). Again, this is pretty simple stuff.

    Problem behavior: When I start horizontally dragging the points on my graph, the mouse events flow to my graph just fine. The thumb indicator on my graph moves horizontally, to follow the drag action. This is good. However, after some small number of pixels, the events stop flowing to my graph, and are instead stolen (likely by the ListView), and the remainder of the gesture is interpreted as a list swipe.

    Is there some way in my QQuickPaintedItem to make sure that the mouse events will not be stolen by the ListView container?

    I have written a good amount of QML code, but not a lot of QtWidgets code, so I am hoping this is just a lack of understanding of how to control the event flow, and not an actual bug.

    • VStevenP
      Steve Pavao
      Korg R&D

  • I wrote a small QtQuick 2.1 app project which exhibits the problem. Is there somewhere I could post it, where someone could try to observe the problem and perhaps offer advice?

    • VStevenP

  • I entered an issue in the Qt bug system, and the project zip may be found there if anyone is interested in taking a peek.


  • Moderators


    I have never reimplemented mouse*Event functions in QQuickPaintedItem so not sure why it doesnot work. But instead of that you can use MouseArea and Drag functionality.
    Something like this

    Circle {
        Drag.active: dragArea.drag.active
        Drag.hotSpot.x: 10
        Drag.hotSpot.y: 10
        MouseArea {
            id: dragArea
            anchors.fill: parent
            drag.axis: Drag.XAxis //to drag along any specific axis. Comment out to drag freely
            drag.target: parent

  • @p3c0 Thanks for this idea. I'll have to wait to see what the bug assignee says about the problem. The project I posted there is a simplified version of the code. There is no separate Circle class in my original problem code; instead, the draggable circle is drawn directly as a ellipse during the graph class paint() function, as a part of the graph re-render. In the test project, I just used the Circle class to simplify the code as much as possible for analysis and still observe the dragging problem.

    So, it'd be best for me if I can solve the problem by just letting the mouse events flow like I would expect. ListView doesn't ever wrongly steal mouse events from nested QML Components, so I feel it should be able to be made to work for nested objects of QQuickItem-based classes made available to QML via qmlRegisterType().

  • Moderators

    @VStevenP Another try would be setting interactive property of ListView to false when dragging the circle.

  • @p3c0 Thanks for this additional idea. The bug assignee updated and closed the bug, informing me that I should call setKeepMouseGrab(true) during the mousePressEvent handler, then the mouse events would never be stolen. It worked like a charm. Thanks again for your additional ideas. I will mark this thread as Solved.