QML rectangle TapHandler problem
-
Hi everyone,
I have two rectangles
Window { visible: true width: 800 height: 480 Rectangle { width: 800 height: 480 color: "black" TapHandler { onTapped: { console.log("rec1"); } } } Rectangle { width: 100 height: 100 color: "white" TapHandler { onTapped: { console.log("rec2"); } } } }
When I click black rectangle it prints "rec1" as I expect. When I click white rectangle which is above the black rectangle, it prints "rec2" and "rec1". But I want only "rec2" should be printed.
What I miss here ? What should I learn or how can I do that ?
Thank you.
-
When I run your code, I see this;
import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 800 height: 480 color: "red" Column { spacing: 100 Rectangle { width: 100 height: 100 color: "black" TapHandler { onTapped: { console.log("rec1"); } } } Rectangle { width: 100 height: 100 color: "white" TapHandler { onTapped: { console.log("rec2"); } } } } }
For Rectangles to be placed above/below each other and be independently clickable, you need to use Column;
import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 800 height: 480 color: "grey" Column { spacing: 100 Rectangle { width: 100 height: 100 color: "white" TapHandler { onTapped: { console.log("rec1"); } } } Rectangle { width: 100 height: 100 color: "black" TapHandler { onTapped: { console.log("rec2"); } } } } }
Just to clarify, I purposely made the black Rectangle the same size as the white one for visibility.
-
hi
@Markkyboy said in QML rectangle TapHandler problem:For Rectangles to be placed above/below each other and be independently clickable, you need to use Column;
i think the question is about the z axis
something like https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#propagateComposedEvents-prop -
@Markkyboy No problem :) This is the exact issue actually https://bugreports.qt.io/browse/QTBUG-85694