QML rectangle TapHandler problem

[PhysicsX]

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.

[Markkyboy]

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.

[ODБOï]

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]

@LeLev - thanks, I had a feeling I was not 'on the money' with my answer....doh!, still learning.

[PhysicsX]

@Markkyboy Thanks for reply, should not move rectangles. white one should stay on top of the black one. When you click the white one, "rec1" should not be printed, only "rec2" should be printed.

[Markkyboy]

@PhysicsX - apologies, I misunderstood your question. I should not be replying late at night! :)

[PhysicsX]

@Markkyboy No problem :) This is the exact issue actually https://bugreports.qt.io/browse/QTBUG-85694