Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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;

    black-and-white-rect.JPG

    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.

    column-black-white-rect.JPG



  • 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



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



  • @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.



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



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


Log in to reply