Clicking on the background of a ScrollView?

[uchian]

Hi,

I have a QML ScrollView, with a flickable area inside of it that has a single Item inside of it. That item manages it's own size - so there is often an area of the background visible on screen.

In my full code, the item itself has other Rectangles and MouseAreas as children, and they all work fine, I can click them, drag them, etc.

I want to be able to perform an action when I click on the background of the scroll view, but I cannot make that work.

The following is a simple example is what I am trying to do. The red rectangle is the flickable item, the background is a green rectangle. The mouse area on the red rectangle works, but I cannot click the green rectangle.

Am I missing something obvious here?

I have tried a number of combinations of preventStealing, propagateComposedEvents.

import QtQuick 2.0
import QtQuick.Controls 2.3

Item {
	ScrollView {
		anchors.fill: parent
		ScrollBar.horizontal.policy: ScrollBar.AsNeeded
   		ScrollBar.vertical.policy: ScrollBar.AsNeeded

   		background: Rectangle {
   			color: "#00FF00"
   			MouseArea {
				anchors.fill: parent
				preventStealing: true
				onClicked: {
					console.debug("Clicked background!");
				}
  			}
		}

		Flickable {
			clip: true

			Rectangle {
				color: "#FF0000"
				width: 5000
				height: 200

				MouseArea {
					anchors.fill: parent
					onClicked: {
						console.debug("Clicked Red!");
					}
				}
			}
		}
	}
}