Transparent MouseArea

[imihajlov]

Is it possible to make several overlapping MouseAreas receive left-clicks together?
@Item {
MouseArea {
id: ma1
anchors.fill: parent
onClicked: {...}
}
MouseArea {
id: ma2
anchors.fill: parent
onClicked: {...}
}
}@

Single click inside the Item should fire both ma1.onClicked and ma2.onClicked. Is it possible?

[sierdzio]

You would need to test, but there are 2 solutions that come immediately to my mind:

• in the MA that receives the event first, assign: event.accepted = false. This will propagate it forward to the next MA in line
• or, in in the onClicked of the first MA, emit a signal to the second area
  @
  onClicked: ma1.clicked(mouse)
  @

Why do you need that anyway? One mouse area should suffice.

[imihajlov]

I have a screen with many buttons, and I want to have the big MouseArea covering a half of the screen. Clicks should be handled by buttons and the big MouseArea too.

[sierdzio]

Strange choice. What I do in my project is to give buttons their own MouseAreas, and place the buttons above (using 'z' value) the background (which also has a MouseArea). This way, when user clicks on a button, I can handle the action for this button, while the main MA remains untouched. If user does not click on the button, though, main MA kicks in.

Anyway, obviously you know your project better, maybe your solution is better in your case. The two ways to achieve this that I provided should work, after some adjustments.