Why does a covered MouseArea still react

poncho524

I have one Rectangle filled with a MouseArea that gets covered by another Rectangle without a MouseArea, but the covered MouseArea still responds.

Why does a covered element still get events? Is there a way to stop this?

import QtQuick 2.0

Rectangle {
  width: 300
  height: 200
  
  Rectangle {
    x: 0
    y: 0
    color: "red"
    width: 100
    height: 100
    MouseArea {
      anchors.fill: parent
      onPressed: {
        console.log("Pressed")
      }
      onReleased: {
        console.log("Released")
      }
    }
  }
  
  Rectangle {
    x: 0
    y: 0
    color: "blue"
    width: 100
    height: 100
  }
  
}

sierdzio

Rectangle is transparent to mouse events. It does not receive, handle or stop them.

If you want to stop the covered area from getting mouse events, add another MouseArea in your top rectangle and catch the mouse there. Or disable the bottom mouse area (enabled: false) then the top rectangle is visible.